@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --ccboi-navy: #08283d;
  --chrome-navy: #08283d;
  --ccboi-navy-soft: #0f3b53;
  --ccboi-ink: #123048;
  --ccboi-text: #31485a;
  --ccboi-muted: #6d7f8d;
  --ccboi-cream: #fbf6ef;
  --ccboi-sand: #f1e5d5;
  --ccboi-white: #fffdf9;
  --ccboi-accent: #c77245;
  --ccboi-accent-dark: #af6239;
  --ccboi-line: rgba(18, 48, 72, 0.12);
  --ccboi-shadow: 0 24px 60px rgba(13, 39, 58, 0.12);
  --ccboi-radius: 28px;
  --ccboi-shell: min(1180px, calc(100% - 32px));
}

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

html {
  scroll-behavior: smooth;
}

body.ccboi-theme {
  margin: 0;
  color: var(--ccboi-text);
  background:
    radial-gradient(circle at top left, rgba(241, 229, 213, 0.95), transparent 32%),
    linear-gradient(180deg, #fffdfa 0%, #f9f5ee 100%);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.6;
}

body.ccboi-theme p,
body.ccboi-theme li,
body.ccboi-theme input,
body.ccboi-theme textarea,
body.ccboi-theme select,
body.ccboi-theme button,
body.ccboi-theme label {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

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

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

a:hover {
  color: var(--ccboi-accent);
}

.ccboi-shell {
  width: var(--ccboi-shell);
  margin: 0 auto;
}

.ccboi-topbar {
  background: var(--chrome-navy);
  color: rgba(255, 253, 249, 0.92);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ccboi-topbar__inner,
.ccboi-header-main,
.ccboi-footer-sub,
.ccboi-button-row,
.ccboi-section-heading,
.ccboi-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ccboi-topbar p {
  margin: 0;
  padding: 0.85rem 0;
}

.ccboi-site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 253, 249, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(18, 48, 72, 0.08);
}

.ccboi-header-main {
  min-height: 106px;
}

.ccboi-brand {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}

.ccboi-brand__mark {
  width: 94px;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.ccboi-brand__mark img {
  display: block;
  width: 94px;
  height: 94px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(6, 43, 54, 0.12));
}

.ccboi-brand__title {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 0.95;
  color: var(--ccboi-ink);
}

.ccboi-brand__subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.83rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ccboi-text);
}

.ccboi-nav-wrap,
.ccboi-nav__list {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.ccboi-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ccboi-nav__list a {
  font: 500 1rem/1.2 "Segoe UI", sans-serif;
  color: var(--ccboi-ink);
}

.ccboi-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--ccboi-white);
  color: var(--ccboi-ink);
  font: 600 0.96rem/1 "Segoe UI", sans-serif;
  transition: 0.2s ease;
}

.ccboi-button:hover {
  transform: translateY(-1px);
}

.ccboi-button--accent {
  background: linear-gradient(135deg, var(--ccboi-accent), #d18457);
  color: var(--ccboi-white);
  box-shadow: 0 14px 28px rgba(199, 114, 69, 0.28);
}

.ccboi-button--ghost {
  border-color: rgba(18, 48, 72, 0.18);
}

.ccboi-button--dark {
  background: var(--ccboi-navy);
  color: var(--ccboi-white);
}

.ccboi-nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(18, 48, 72, 0.12);
  border-radius: 14px;
  background: var(--ccboi-white);
}

.ccboi-nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  background: var(--ccboi-ink);
}

.ccboi-site-main {
  overflow: clip;
}

.ccboi-kicker {
  margin: 0 0 1rem;
  color: var(--ccboi-accent);
  font: 700 0.82rem/1.2 "Segoe UI", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ccboi-kicker--light {
  color: rgba(255, 253, 249, 0.72);
}

.ccboi-hero,
.ccboi-page-hero {
  padding: 2.8rem 0 0;
}

.ccboi-hero__grid,
.ccboi-page-hero__grid {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  align-items: stretch;
  gap: 0;
  background: rgba(255, 253, 249, 0.78);
  border: 1px solid rgba(18, 48, 72, 0.08);
  border-radius: 34px;
  overflow: hidden;
  box-shadow: var(--ccboi-shadow);
}

.ccboi-hero__content,
.ccboi-page-hero__grid > div:first-child {
  padding: clamp(2rem, 5vw, 4.25rem);
  background:
    radial-gradient(circle at left center, rgba(255, 244, 226, 0.95), rgba(255, 253, 249, 0.85) 56%, rgba(255, 253, 249, 0.45) 100%),
    linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(251, 246, 239, 0.9));
}

.ccboi-hero h1,
.ccboi-page-hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.9rem, 6vw, 5rem);
  line-height: 0.95;
  color: var(--ccboi-ink);
  max-width: 10ch;
}

.ccboi-hero__lede,
.ccboi-page-hero__lede {
  max-width: 36rem;
  margin: 0 0 1.5rem;
  font-size: 1.1rem;
}

.ccboi-coordinates {
  margin: 1.5rem 0 0;
  font: 500 0.78rem/1 "Segoe UI", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ccboi-muted);
}

.ccboi-hero__image,
.ccboi-page-hero__image {
  min-height: 520px;
  background:
    linear-gradient(90deg, rgba(8, 40, 61, 0.05), rgba(8, 40, 61, 0.18)),
    radial-gradient(circle at left center, rgba(255, 228, 174, 0.85), transparent 28%),
    linear-gradient(180deg, rgba(255, 215, 150, 0.58), rgba(12, 39, 60, 0.18) 36%, rgba(7, 26, 38, 0.34)),
    linear-gradient(0deg, rgba(13, 41, 63, 0.56), rgba(13, 41, 63, 0.12)),
    url("../images/hero-chambers-bay.jpg");
  background-size: cover;
  background-position: center;
}

.ccboi-quick-access {
  position: relative;
  margin: -3rem auto 0;
  padding: 1.8rem 2rem;
  display: grid;
  grid-template-columns: 1.2fr repeat(4, 1fr);
  gap: 1.25rem;
  color: var(--ccboi-white);
  background:
    radial-gradient(circle at top right, rgba(46, 108, 140, 0.3), transparent 26%),
    linear-gradient(135deg, #051f31, #0d3348 64%, #123b53);
  border-radius: 24px;
  border: 1px solid rgba(255, 253, 249, 0.1);
  box-shadow: var(--ccboi-shadow);
}

.ccboi-quick-access a {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.2rem 0 0 1.15rem;
  border-left: 1px solid rgba(255, 253, 249, 0.16);
  color: var(--ccboi-white);
}

.ccboi-quick-access strong {
  font: 700 1rem/1.2 "Segoe UI", sans-serif;
}

.ccboi-quick-access span {
  color: rgba(255, 253, 249, 0.72);
  font-size: 0.92rem;
}

.ccboi-section {
  padding: 5rem 0 0;
}

.ccboi-section--about {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 2rem;
  align-items: start;
}

.ccboi-section__intro h2,
.ccboi-section-heading h2,
.ccboi-panel h2,
.ac-section h2,
.ac-dashboard h2 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
  color: var(--ccboi-ink);
}

.ccboi-feature-grid,
.ccboi-home-panels,
.ccboi-event-grid,
.ac-card-list,
.ac-dashboard {
  display: grid;
  gap: 1.35rem;
}

.ccboi-feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ccboi-feature-grid article,
.ccboi-event-card,
.ccboi-panel,
.ac-card,
.ac-section,
.ccboi-page-content {
  background: rgba(255, 253, 249, 0.86);
  border: 1px solid var(--ccboi-line);
  border-radius: 24px;
  box-shadow: 0 12px 28px rgba(18, 48, 72, 0.06);
}

.ccboi-feature-grid article {
  padding: 1.45rem 1.55rem;
}

.ccboi-feature-grid h3,
.ccboi-panel h3,
.ccboi-event-card h3,
.ac-card h3 {
  margin: 0 0 0.55rem;
  color: var(--ccboi-ink);
  font-size: 1.45rem;
}

.ccboi-section-heading {
  margin-bottom: 1.25rem;
}

.ccboi-section-heading a,
.ccboi-inline-action,
.ccboi-page-content .wp-block-button__link {
  color: var(--ccboi-accent);
  font: 700 0.95rem/1 "Segoe UI", sans-serif;
}

.ccboi-event-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ccboi-event-card {
  padding: 1.35rem;
  display: flex;
  gap: 1rem;
}

.ccboi-event-card__date {
  min-width: 72px;
  text-align: center;
  padding: 0.8rem 0.5rem;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff7eb, #f5e2cd);
  color: var(--ccboi-accent-dark);
}

.ccboi-event-card__date span {
  display: block;
  font: 700 0.76rem/1 "Segoe UI", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ccboi-event-card__date strong {
  display: block;
  margin-top: 0.4rem;
  font-size: 2rem;
  line-height: 1;
}

.ccboi-home-panels {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ccboi-panel {
  padding: 1.5rem;
}

.ccboi-list,
.ac-list,
.ac-detail-list,
.ccboi-footer__links,
.ccboi-footer__details {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ccboi-list li,
.ac-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0;
  border-top: 1px solid rgba(18, 48, 72, 0.08);
}

.ccboi-list li:first-child,
.ac-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.ccboi-list strong,
.ac-list strong,
.ac-card strong {
  display: block;
}

.ccboi-list span,
.ac-meta,
.ac-muted,
.ccboi-footer-copy {
  color: var(--ccboi-muted);
  font-size: 0.95rem;
}

.ccboi-page-content {
  margin-top: 2rem;
  padding: clamp(1.2rem, 3vw, 2rem);
}

.ccboi-page-content--feature,
.ccboi-page-content--portal {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 2rem 0 0;
}

.ccboi-portal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: -1.65rem;
  padding: 0.9rem 1rem;
  background: rgba(255, 253, 249, 0.94);
  border: 1px solid var(--ccboi-line);
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(18, 48, 72, 0.08);
}

.ccboi-portal-nav a {
  padding: 0.8rem 1rem;
  border-radius: 14px;
  font: 600 0.95rem/1 "Segoe UI", sans-serif;
}

.ccboi-portal-nav a:hover {
  background: rgba(199, 114, 69, 0.08);
}

.ccboi-gallery-strip {
  margin-top: 5rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ccboi-gallery-strip__item {
  min-height: 180px;
  background-size: cover;
  background-position: center;
}

.ccboi-gallery-strip__item--clubhouse {
  background:
    linear-gradient(180deg, rgba(9, 37, 54, 0.15), rgba(9, 37, 54, 0.42)),
    url("../images/gallery_clubhouse.jpg");
}

.ccboi-gallery-strip__item--boat {
  background:
    linear-gradient(180deg, rgba(14, 39, 58, 0.1), rgba(14, 39, 58, 0.3)),
    url("../images/gallery_boat.jpg");
}

.ccboi-gallery-strip__item--marina {
  background:
    linear-gradient(180deg, rgba(14, 39, 58, 0.12), rgba(14, 39, 58, 0.32)),
    url("../images/gallery_marina.jpg");
}

.ccboi-gallery-strip__item--mountain {
  background:
    linear-gradient(180deg, rgba(14, 39, 58, 0.14), rgba(14, 39, 58, 0.34)),
    url("../images/gallery_mountain.jpg");
}

.ccboi-footer-main {
  background: var(--chrome-navy);
  color: rgba(255, 253, 249, 0.9);
}

.ccboi-footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 2rem;
  padding: 3rem 0 2rem;
}

.ccboi-brand--footer .ccboi-brand__title,
.ccboi-footer-heading {
  color: var(--ccboi-white);
}

.ccboi-footer-heading {
  margin: 0 0 1rem;
  font-size: 1.35rem;
}

.ccboi-footer__links li,
.ccboi-footer__details li {
  margin-bottom: 0.55rem;
}

.ccboi-footer__links a,
.ccboi-footer__details a,
.ccboi-footer-sub a {
  color: rgba(255, 253, 249, 0.88);
}

.ccboi-footer-sub {
  padding: 1rem 0 1.6rem;
  border-top: 1px solid rgba(255, 253, 249, 0.12);
  font: 500 0.88rem/1.4 "Segoe UI", sans-serif;
}

.ac-dashboard {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A lone dashboard card (e.g. payments-only, when the theme provides its own
   portal nav) spans the full width instead of stranding an empty 2nd column. */
.ac-dashboard > .ac-card:only-child {
  grid-column: 1 / -1;
}

.ac-card,
.ac-section {
  padding: 1.5rem;
}

.ac-section {
  margin-bottom: 1.5rem;
}

.ac-card-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ac-section > h2:first-child {
  margin-bottom: 1.35rem;
}

/* Events page: drop ONLY the one giant background card on the module. Every
   inner element keeps its own card, so they read as separate background cards. */
.ac-events-module {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.ac-card {
  position: relative;
  overflow: hidden;
}

.ac-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--brass), rgba(199, 114, 69, 0.5));
  opacity: 0.72;
}

.ac-content {
  color: var(--muted);
  line-height: 1.65;
}

.ac-detail-list {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
}

.ac-button,
button.ac-button,
.ac-actions .button,
.ac-form button,
.ccboi-page-content input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.78rem 1.2rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ccboi-accent), #d18457);
  color: var(--ccboi-white);
  font: 700 0.92rem/1 "Segoe UI", sans-serif;
}

.ac-button-muted {
  background: rgba(18, 48, 72, 0.08);
  color: var(--ccboi-ink);
}

.ac-link-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.ac-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ac-detail-list li {
  margin-bottom: 0.6rem;
}

/* The `.ac-plugin .ac-message` selector is required, not redundant: the plugin sets
   `padding: .9rem 1rem` at specificity 0,2,0 (components.css), which beats a bare
   `.ac-message` at 0,1,0 regardless of load order. Since scope_wrap() puts almost all
   plugin output inside `.ac-plugin`, the gutter below was being stripped and the
   ::before dot landed on top of the text. */
.ac-message,
.ac-plugin .ac-message {
  position: relative;
  padding: 1.1rem 1.2rem 1.1rem 3.4rem;
  border: 1px solid rgba(199, 114, 69, 0.12);
  border-radius: 18px;
  background:
    radial-gradient(circle at 1.55rem 50%, rgba(207, 166, 78, 0.28), transparent 0.72rem),
    rgba(199, 114, 69, 0.08);
  color: var(--ccboi-ink);
  box-shadow: 0 12px 26px rgba(18, 48, 72, 0.04);
}

.ac-message::before {
  content: "";
  position: absolute;
  left: 1.32rem;
  top: 50%;
  width: 0.52rem;
  height: 0.52rem;
  transform: translateY(-50%);
  background: var(--copper);
  border-radius: 999px;
  box-shadow: 0 0 0 6px rgba(199, 114, 69, 0.1);
}

.ac-message a {
  color: var(--copper);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.ac-form p {
  margin: 0 0 1rem;
}

.ac-form input,
.ac-form select,
.ac-form textarea,
.ccboi-page-content input[type="text"],
.ccboi-page-content input[type="email"],
.ccboi-page-content input[type="url"],
.ccboi-page-content input[type="tel"],
.ccboi-page-content input[type="date"],
.ccboi-page-content input[type="time"],
.ccboi-page-content select,
.ccboi-page-content textarea {
  width: 100%;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(18, 48, 72, 0.12);
  border-radius: 16px;
  background: rgba(255, 253, 249, 0.94);
}

.ccboi-page-content .wp-block-columns,
.ccboi-page-content .wp-block-group,
.ccboi-page-content .wp-block-cover,
.ccboi-page-content .wp-block-table,
.ccboi-page-content .wp-block-media-text {
  margin-bottom: 1.5rem;
}

@media (max-width: 1080px) {
  .ccboi-quick-access,
  .ccboi-footer-grid,
  .ccboi-section--about,
  .ccboi-event-grid,
  .ccboi-home-panels,
  .ac-dashboard,
  .ac-card-list {
    grid-template-columns: 1fr 1fr;
  }

  .ccboi-quick-access {
    grid-template-columns: 1fr 1fr;
  }

  .ccboi-hero__grid,
  .ccboi-page-hero__grid {
    grid-template-columns: 1fr;
  }

  .ccboi-hero__image,
  .ccboi-page-hero__image {
    min-height: 360px;
  }
}

@media (max-width: 820px) {
  .ccboi-topbar__inner,
  .ccboi-header-main,
  .ccboi-footer-sub,
  .ccboi-button-row,
  .ccboi-section-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .ccboi-nav-toggle {
    display: inline-block;
  }

  .ccboi-nav-wrap {
    display: none;
    width: 100%;
    padding-bottom: 1rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .ccboi-nav-wrap.is-open {
    display: flex;
  }

  .ccboi-nav__list {
    flex-direction: column;
    align-items: flex-start;
  }

  .ccboi-quick-access,
  .ccboi-footer-grid,
  .ccboi-section--about,
  .ccboi-feature-grid,
  .ccboi-event-grid,
  .ccboi-home-panels,
  .ac-dashboard,
  .ac-card-list,
  .ccboi-gallery-strip {
    grid-template-columns: 1fr;
  }

  .ccboi-brand__title {
    font-size: 2.3rem;
  }

  .ccboi-page-content {
    padding: 1rem;
  }
}

/* Homepage and global shell aligned to the static CCBOI prototype. */
:root {
  --chrome-navy: #08283d;
  --navy-950: var(--chrome-navy);
  --navy-900: #0b3347;
  --navy-800: #0b3e4d;
  --cream: #f5efe4;
  --fog: #fbf8f1;
  --line: #d8cfbf;
  --line-soft: #ebe4d8;
  --copper: #b85f3c;
  --copper-dark: #934526;
  --brass: #d5b15b;
  --ink: #0a2f3b;
  --muted: #617078;
  --success: #dcebd5;
  --danger-bg: #f5e3da;
  --shadow: 0 18px 45px rgba(7, 33, 43, 0.14);
  --soft-shadow: 0 10px 30px rgba(20, 35, 35, 0.08);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --max: 1180px;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Manrope", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body.ccboi-theme {
  background: var(--fog);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}

body.ccboi-theme a {
  color: inherit;
  text-decoration: none;
}

body.ccboi-theme img {
  display: block;
  max-width: 100%;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.utility {
  background: var(--chrome-navy);
  color: #fff;
  height: 40px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.utility .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.utility span {
  opacity: 0.92;
  white-space: nowrap;
}

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fbf8f1;
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 6px 20px rgba(8, 51, 65, 0.04);
}

.header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 310px;
}

.brand-logo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #fff, #f6efe5);
  border: 1px solid var(--line);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  flex: 0 0 auto;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-title {
  display: block;
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 34px;
  letter-spacing: 0.12em;
  line-height: 0.85;
}

.brand-sub {
  display: block;
  margin-top: 9px;
  color: #36464c;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.35;
  text-transform: uppercase;
}

.ccboi-nav-wrap {
  display: flex;
  align-items: center;
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  color: #173843;
  font-size: 14px;
  font-weight: 700;
}

.nav .ccboi-nav__list {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav .ccboi-nav__list li {
  margin: 0;
}

.nav .ccboi-nav__list a {
  position: relative;
  display: inline-block;
  padding: 8px 0;
}

.nav .ccboi-nav__list a:hover::after,
.nav .current-menu-item > a::after,
.nav .current_page_item > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--copper);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  font-weight: 800;
  line-height: 1;
  transition: 0.2s ease;
}

.btn-primary {
  background: var(--copper);
  color: #fff;
  box-shadow: 0 12px 26px rgba(184, 95, 60, 0.22);
}

.btn-primary:hover {
  background: var(--copper-dark);
  transform: translateY(-1px);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.45);
  border-color: #8a989b;
  color: var(--ink);
}

.btn-dark {
  background: var(--navy-900);
  color: #fff;
}

.btn-small {
  padding: 9px 14px;
  font-size: 13px;
}

.home-hero,
.page-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  background:
    linear-gradient(90deg, #fbf8f1 0%, #fbf8f1 43%, rgba(251, 248, 241, 0.7) 58%, transparent 100%),
    url("../images/hero-chambers-bay.jpg") right center / cover no-repeat;
}

.home-hero {
  min-height: 580px;
  display: flex;
  align-items: center;
}

.page-hero {
  min-height: 300px;
  display: flex;
  align-items: center;
}

.pattern {
  position: absolute;
  inset: auto auto -35px -70px;
  width: 360px;
  height: 260px;
  opacity: 0.28;
  pointer-events: none;
  border-radius: 50%;
  background: repeating-radial-gradient(ellipse at center, transparent 0 16px, rgba(8, 51, 65, 0.22) 17px 18px);
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 78px 24px;
}

.kicker,
.eyebrow {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--copper);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.kicker::before,
.eyebrow::before {
  content: "";
  width: 44px;
  height: 4px;
  border-radius: 10px;
  background: var(--brass);
}

.home-hero h1,
.page-hero h1 {
  margin: 0 0 20px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(48px, 6.2vw, 86px);
  letter-spacing: -0.055em;
  line-height: 0.92;
}

.page-hero h1 {
  font-size: clamp(44px, 5vw, 66px);
}

.lead {
  max-width: 470px;
  margin: 0 0 28px;
  color: #203c44;
  font-size: 18px;
}

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

.coordinates {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #587078;
  font-size: 12px;
}

.compass {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--navy-900);
}

.quick-panel {
  position: relative;
  z-index: 3;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr repeat(4, 1fr);
  max-width: 820px;
  margin: -86px auto 0;
  color: #fff;
  background: var(--navy-950);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.quick-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background: repeating-radial-gradient(ellipse at left bottom, transparent 0 20px, rgba(255, 255, 255, 0.07) 21px 22px);
}

.quick-cell {
  position: relative;
  padding: 28px 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.quick-cell:first-child {
  border-left: 0;
}

.quick-title {
  margin: 10px 0 2px;
  font-family: var(--serif);
  font-size: 28px;
}

.quick-label {
  color: var(--brass);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.quick-icon {
  color: #e7dccb;
  font-size: 28px;
}

.quick-cell h3 {
  margin: 4px 0 6px;
  font-size: 15px;
}

.quick-cell p {
  margin: 0 0 12px;
  color: #d7e0e2;
  font-size: 12px;
}

.link {
  color: var(--copper);
  font-size: 14px;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.section {
  padding: 72px 24px;
}

.section.alt {
  background: var(--cream);
}

.container {
  max-width: var(--max);
  margin: auto;
}

.ccboi-page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--chrome-navy);
  opacity: 1;
  pointer-events: auto;
  transition: opacity 520ms ease, visibility 520ms ease;
  visibility: visible;
}

.ccboi-page-loader__mark {
  display: grid;
  place-items: center;
  width: clamp(148px, 22vw, 232px);
  aspect-ratio: 1;
  padding: clamp(16px, 2.2vw, 24px);
  border: 1px solid rgba(213, 177, 91, 0.34);
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.96);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.24);
  animation: ccboiLoaderPulse 1400ms ease-in-out infinite;
}

.ccboi-page-loader__mark img {
  display: block;
  width: 96%;
  height: 96%;
  object-fit: contain;
}

body.ccboi-loaded .ccboi-page-loader {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

@keyframes ccboiLoaderPulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.035);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ccboi-page-loader,
  .ccboi-page-loader__mark {
    animation: none;
    transition: none;
  }
}

.grid {
  display: grid;
  gap: 24px;
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.split {
  display: grid;
  grid-template-columns: 0.95fr 1.5fr;
  gap: 70px;
  align-items: start;
}

.section h2 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: clamp(34px, 3.4vw, 48px);
  letter-spacing: -0.035em;
  line-height: 1.03;
}

.copy {
  max-width: 560px;
  margin: 0 0 26px;
  color: #41545a;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.feature {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: start;
  padding: 28px 34px;
  background: rgba(255, 255, 255, 0.18);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.feature .icon {
  color: var(--ink);
  font-size: 34px;
}

.feature h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

.feature p {
  margin: 0;
  color: #5a686c;
  font-size: 14px;
}

.card {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--soft-shadow);
}

.card-pad {
  padding: 28px;
}

.card h3 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 25px;
}

.event-card {
  min-height: 150px;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  padding: 22px;
}

.date {
  height: 62px;
  padding: 9px 4px;
  background: #f5eee3;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  text-align: center;
}

.date small {
  display: block;
  color: var(--copper);
  font-size: 12px;
  font-weight: 900;
}

.date strong {
  font-family: var(--serif);
  font-size: 29px;
  line-height: 1;
}

.editorial-page {
  display: grid;
  gap: 34px;
}

.editorial-split,
.harbor-note,
.timeline-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: start;
}

.editorial-page .eyebrow {
  margin: 0 0 12px;
  color: var(--copper);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.editorial-page h2 {
  max-width: 720px;
}

.editorial-copy {
  display: grid;
  gap: 16px;
  padding: 8px 0 0;
}

.editorial-copy p,
.harbor-note > p,
.event-feature p {
  margin: 0;
  color: #41545a;
  font-size: 16px;
  line-height: 1.72;
}

.stat-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(213, 177, 91, 0.22), transparent 34%),
    rgba(255, 255, 255, 0.42);
  box-shadow: var(--soft-shadow);
}

.stat-band div {
  min-height: 118px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 24px;
  border-left: 1px solid var(--line);
}

.stat-band div:first-child {
  border-left: 0;
}

.stat-band strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.stat-band span {
  color: var(--copper);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.value-grid article,
.event-feature,
.timeline-panel,
.harbor-note {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: var(--soft-shadow);
}

.value-grid article {
  min-height: 292px;
  display: grid;
  align-content: end;
  padding: 28px;
}

.value-grid article::before,
.event-feature::before,
.timeline-panel::before,
.harbor-note::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--brass), rgba(184, 95, 60, 0.42));
}

.value-grid span {
  position: absolute;
  top: 22px;
  right: 24px;
  color: rgba(8, 51, 65, 0.1);
  font-family: var(--serif);
  font-size: 74px;
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 1;
}

.value-grid h3,
.event-feature h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 22px;
}

.value-grid p {
  margin: 0;
  color: #52656b;
  font-size: 15px;
  line-height: 1.68;
}

.harbor-note,
.timeline-panel {
  padding: clamp(28px, 4vw, 44px);
}

.event-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.event-feature {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 28px;
}

.event-feature:first-child {
  align-content: end;
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.62), rgba(255, 253, 249, 0.92)),
    url("../images/gallery_marina.jpg") center / cover no-repeat;
}

.event-showcase:has(.event-feature:nth-child(3)) {
  grid-template-columns: 1.12fr 0.88fr;
  grid-template-areas:
    "first second"
    "first third";
}

.event-showcase:has(.event-feature:nth-child(3)) .event-feature:first-child {
  grid-area: first;
  min-height: 100%;
}

.event-showcase:has(.event-feature:nth-child(3)) .event-feature:nth-child(2) {
  grid-area: second;
}

.event-showcase:has(.event-feature:nth-child(3)) .event-feature:nth-child(3) {
  grid-area: third;
}

.event-showcase:not(:has(.event-feature:nth-child(3))) .event-feature {
  min-height: 220px;
}

.event-feature .date {
  width: 74px;
  height: 82px;
}

.event-feature .date strong {
  font-size: 36px;
}

.event-feature .meta {
  margin-bottom: 12px;
  font-weight: 700;
}

.event-timeline {
  counter-reset: event-step;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-timeline li {
  counter-increment: event-step;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
}

.event-timeline li:first-child {
  padding-top: 0;
  border-top: 0;
}

.event-timeline li::before {
  content: counter(event-step, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(213, 177, 91, 0.75);
  border-radius: 999px;
  color: var(--copper);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
}

.event-timeline strong,
.event-timeline span {
  display: block;
  grid-column: 2;
}

.event-timeline strong {
  color: var(--ink);
  font-size: 17px;
}

.event-timeline span {
  color: #52656b;
  font-size: 14px;
  line-height: 1.62;
}

.meta {
  color: #52656b;
  font-size: 13px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 175px;
  overflow: hidden;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-right: 2px solid var(--fog);
}

.footer {
  position: relative;
  overflow: hidden;
  background: var(--chrome-navy);
  color: #f7efe6;
}

.footer::before {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -140px;
  width: 420px;
  height: 420px;
  opacity: 0.35;
  border-radius: 50%;
  background: repeating-radial-gradient(ellipse at center, transparent 0 19px, rgba(255, 255, 255, 0.08) 20px 21px);
}

.footer .wrap {
  position: relative;
  padding-top: 44px;
  padding-bottom: 22px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.8fr 0.95fr 1.05fr;
  gap: 34px;
}

.footer h4 {
  margin: 0 0 12px;
  font-size: 16px;
}

.footer p,
.footer li {
  color: #d9e2e4;
  font-size: 14px;
}

/*
 * One rhythm for all three footer columns. Quick Links is a WordPress nav menu and carried
 * its own item spacing (29px between rows); Member Resources is a plain list and fell back
 * to line-height alone (20px); Contact is paragraphs whose 14px margins plus a two-line
 * address opened up to 59px. Three different mechanisms, three different gaps.
 *
 * A grid with an explicit gap replaces all of it, so the columns agree regardless of which
 * markup produced them.
 */
.footer ul,
.ccboi-footer__links {
  display: grid;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The nav menu ships its own item margins, which stacked on top of the gap above and left
   Quick Links at 39px against Member Resources' 30px. The gap is the single control now. */
.footer ul > li,
.ccboi-footer__links > li {
  margin: 0;
  padding: 0;
}

.footer .footer-grid > div > p {
  margin: 0 0 9px;
}

.footer .footer-grid > div > p:last-child {
  margin-bottom: 0;
}

.copyright {
  display: flex;
  justify-content: center;
  text-align: center;
  gap: 20px;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #d9e2e4;
  font-size: 12px;
}

.brand--footer {
  min-width: 0;
  gap: 12px;
}

.brand--footer .brand-title {
  font-size: 25px;
  color: #fff;
}

.brand--footer .brand-sub {
  color: #d7e0e2;
}

.brand-logo--footer {
  width: 58px;
  height: 58px;
}

@media (max-width: 960px) {
  .utility .wrap {
    justify-content: center;
  }

  .utility span:last-child {
    display: none;
  }

  .header .wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav,
  .nav .ccboi-nav__list {
    flex-wrap: wrap;
    gap: 18px;
  }

  .brand {
    min-width: 0;
  }

  .home-hero,
  .page-hero {
    background: linear-gradient(90deg, rgba(251, 248, 241, 0.96), rgba(251, 248, 241, 0.82)), url("../images/hero-chambers-bay.jpg") center/cover no-repeat;
  }

  .quick-panel {
    grid-template-columns: 1fr 1fr;
    margin: 0 24px;
  }

  .quick-cell {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .split,
  .grid-4,
  .feature-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

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

  .gallery img {
    height: 180px;
  }
}

/* Homepage fidelity refinements */
.utility span,
.coordinates,
.quick-icon,
.feature .icon,
.footer p {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-inline,
.quick-icon,
.feature .icon,
.compass {
  flex: 0 0 auto;
}

.icon-inline svg,
.quick-icon svg,
.feature .icon svg,
.compass svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.icon-inline--sm {
  width: 14px;
  height: 14px;
}

.icon-inline--sm svg {
  width: 14px;
  height: 14px;
}

.brand-logo {
  width: 86px;
  height: 86px;
}

.brand-logo img {
  transform: scale(1.06);
}

.nav > .btn::after,
.hero-actions .btn::after,
.footer a::after {
  display: none !important;
}

.btn-primary,
.btn-primary:visited,
.btn-dark,
.btn-dark:visited {
  color: #fff !important;
}

.btn-secondary,
.btn-secondary:visited {
  color: var(--ink) !important;
}

.home-hero h1 {
  max-width: 560px;
  font-size: clamp(37px, 4.55vw, 61px);
}

.lead {
  max-width: 430px;
  font-size: 17px;
  line-height: 1.55;
}

.coordinates {
  font-size: 11px;
  letter-spacing: 0.02em;
}

.quick-panel .link,
.quick-panel .link:visited {
  color: #f7efe6;
}

.quick-title {
  font-size: 25px;
  line-height: 1.05;
}

.quick-cell h3 {
  font-size: 14px;
}

.quick-cell p {
  font-size: 11px;
  line-height: 1.45;
}

.feature .icon,
.quick-icon {
  color: var(--ink);
}

.quick-icon {
  color: #e7dccb;
}

.feature .icon svg {
  width: 34px;
  height: 34px;
}

.section-events {
  grid-template-columns: 1.08fr repeat(3, minmax(0, 1fr));
}

.section-events > div:first-child h2 {
  max-width: 7ch;
}

.event-card {
  min-height: 0;
  padding: 20px 20px 18px;
}

.event-card h3 {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.28;
}

.event-card p {
  margin: 0;
}

.event-card .meta {
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.45;
}

.event-card > div:last-child > p:last-child {
  font-size: 13px;
  line-height: 1.55;
}

.footer p {
  align-items: flex-start;
  line-height: 1.6;
}

.footer .icon-inline--sm {
  margin-top: 3px;
}

@media (max-width: 960px) {
  .section-events {
    grid-template-columns: 1fr;
  }

  .event-card h3 {
    font-size: 18px;
  }

  .brand-logo {
    width: 76px;
    height: 76px;
  }
}

body.ccboi-theme,
body.ccboi-theme p,
body.ccboi-theme li,
body.ccboi-theme input,
body.ccboi-theme textarea,
body.ccboi-theme select,
body.ccboi-theme button,
body.ccboi-theme label {
  font-family: var(--sans);
}

.brand-title,
.home-hero h1,
.page-hero h1,
h2,
.quick-title {
  font-family: var(--serif);
}

.brand-title {
  font-size: 37px;
  letter-spacing: 0.1em;
  line-height: 0.82;
}

.home-hero h1 {
  letter-spacing: -0.038em;
  line-height: 0.93;
}

.lead,
.copy,
.feature p,
.event-card p,
.meta {
  font-family: var(--sans);
}

/* Inner-page prototype system */
.page-hero {
  margin: 0;
}

.page-hero .hero-content {
  padding-top: 70px;
  padding-bottom: 70px;
}

.page-hero h1 {
  max-width: 8.5em;
}

.toolbar {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.search,
.select,
.contact-grid input,
.contact-grid textarea,
.contact-grid select {
  width: 100%;
  padding: 13px 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.select {
  max-width: 190px;
}

.layout-docs {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.side-title {
  margin: 0 0 15px;
  color: var(--copper);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sidebar-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}

.sidebar-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  color: #273f48;
  background: rgba(255, 255, 255, 0.48);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
}

.sidebar-list a.active {
  color: #fff;
  background: var(--navy-900);
}

.pill {
  padding: 2px 9px;
  color: #43525a;
  background: #ede6db;
  border-radius: 999px;
  font-size: 12px;
}

.active .pill {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.doc-list {
  overflow: hidden;
}

.doc-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 120px 140px;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.doc-row:last-child {
  border-bottom: 0;
}

.file-icon {
  width: 40px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #d55b4a;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.file-icon.docx {
  background: #5d9fce;
}

.file-icon.xlsx {
  background: #4f9562;
}

.doc-row h4,
.doc-row p {
  margin: 0;
}

.doc-row h4 {
  margin-bottom: 4px;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.forms-help {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr;
  gap: 24px;
  margin-top: 28px;
}

.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.form-row:last-child {
  border-bottom: 0;
}

.form-row p {
  margin: 2px 0 0;
  color: #69777c;
  font-size: 13px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.85fr;
  gap: 24px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.field-full {
  grid-column: 1 / -1;
}

.contact-grid label {
  display: block;
  margin: 0 0 7px;
  font-size: 13px;
  font-weight: 800;
}

.contact-grid textarea {
  min-height: 160px;
  resize: vertical;
}

.contact-grid button {
  margin-top: 18px;
}

.info-list {
  display: grid;
  gap: 24px;
}

.info-item {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
}

.info-item p {
  margin: 0;
  color: #53656b;
  font-size: 14px;
}

.info-item b {
  display: block;
  color: var(--ink);
}

.emergency {
  padding: 18px;
  background: var(--danger-bg);
  border: 1px solid #e8c4b4;
  border-radius: 12px;
}

.map-card {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  background: linear-gradient(135deg, #dfe8da, #b6ced1 44%, #f2eadb 45%);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.map-card::before {
  content: "Chambers Creek";
  position: absolute;
  left: 14%;
  top: 43%;
  color: #4e7483;
  font-family: var(--serif);
  font-size: 24px;
}

.map-card::after {
  content: "CCBOI Clubhouse";
  position: absolute;
  right: 11%;
  top: 34%;
  padding: 8px 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.dashboard {
  display: grid;
  grid-template-columns: 1fr 1.9fr;
  gap: 24px;
}

.dashboard-lower {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.1fr;
  gap: 24px;
  margin-top: 24px;
}

.reservation-row {
  display: grid;
  grid-template-columns: 105px 66px minmax(0, 1fr) 120px;
  gap: 18px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}

.reservation-row > p:empty {
  display: none;
}

.reservation-row > div:not(.date) {
  grid-column: 3;
}

.reservation-row > p:has(.status) {
  grid-column: 4;
  justify-self: end;
  margin: 0;
}

.reservation-row:last-child {
  border-bottom: 0;
}

.thumb {
  width: 105px;
  height: 68px;
  object-fit: cover;
  border-radius: 9px;
}

.reservation-row .date {
  width: 66px;
}

.status {
  padding: 7px 10px;
  color: #3a6840;
  background: var(--success);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.metric {
  margin: 8px 0 2px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 43px;
  line-height: 1;
}

.notice-list,
.mini-list {
  display: grid;
  gap: 12px;
}

.notice-list div,
.mini-list div {
  display: grid;
  gap: 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.dashboard .quick-actions {
  grid-template-columns: 1fr;
  gap: 12px;
}

.dashboard .action-tile {
  min-height: 0;
  grid-template-columns: 82px minmax(0, 1fr);
  justify-items: stretch;
  padding: 14px 16px;
  text-align: left;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
}

.portal-tabs {
  position: relative;
  z-index: 4;
  max-width: var(--max);
  margin: -26px auto 24px;
  padding: 0 24px;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--soft-shadow);
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 15px 14px;
  color: #405258;
  border-bottom: 3px solid transparent;
  font-weight: 800;
}

.tab.active,
.tab:hover {
  color: var(--copper);
  border-bottom-color: var(--copper);
}

.card .ac-section h2,
.card .ac-dashboard h2 {
  font-size: clamp(28px, 2.4vw, 38px);
}

.card .ac-card-list,
.card .ac-dashboard {
  grid-template-columns: 1fr;
}

.card .ac-card,
.card .ac-section {
  padding: 1.15rem;
}

.card .ac-message {
  font-size: 14px;
}

.page-hero--portal {
  background:
    linear-gradient(90deg, #fbf8f1 0%, #fbf8f1 39%, rgba(251, 248, 241, 0.64) 58%, rgba(251, 248, 241, 0.12) 100%),
    url("../images/hero-chambers-bay.jpg") right center / cover no-repeat;
}

.section--portal-content {
  padding-top: 18px;
}

.card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.portal-summary h4 {
  margin: 0 0 4px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
}

.due-note {
  color: var(--copper);
}

.portal-plugin-output {
  margin-top: 24px;
}

.portal-plugin-output > .ac-message:first-child,
.portal-plugin-output > .ac-dashboard:first-child,
.portal-plugin-output > .ac-access-panel:first-child,
.portal-plugin-output > .ac-login-panel:first-child,
.portal-plugin-output > .ac-account-summary:first-child {
  margin-top: 0;
}

.ac-access-panel,
.ac-account-summary {
  position: relative;
  overflow: hidden;
  margin: 0 0 24px;
  padding: clamp(26px, 4vw, 42px);
  background:
    radial-gradient(circle at top right, rgba(213, 177, 91, 0.18), transparent 32%),
    rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--soft-shadow);
}

.ac-account-summary {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 1.05fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
}

.ac-access-panel {
  display: grid;
  gap: 24px;
}

.ac-access-panel::before,
.ac-account-summary::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--brass), rgba(184, 95, 60, 0.48));
}

.ac-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  color: var(--copper);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.ac-kicker::before {
  content: "";
  width: 42px;
  height: 4px;
  flex: 0 0 42px;
  border-radius: 999px;
  background: var(--brass);
}

.ac-access-panel h2,
.ac-account-summary h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(34px, 3.2vw, 48px);
  line-height: 1;
  letter-spacing: -0.04em;
}

/* The login brand block is navy — its heading must stay light and plugin-sized,
   even when nested inside an .ac-access-panel (member-portal logged-out view),
   whose broad h2 rule above would otherwise darken it. */
/* The kicker sits on the same navy panel as the wordmark, where copper only reaches
   2.83:1 — below WCAG AA. Brass is already the theme's eyebrow colour on dark panels
   (see .quick-panel--water), so reuse it rather than introduce a new tone. */
/* Header "Member Portal" button: the label needs ~101px but only ~93px is free beside
   the icon, so it wrapped to four line-boxes and stretched the button to 56px tall.
   Button labels should never wrap. */
.header .nav .btn,
.ccboi-nav-wrap .btn {
  white-space: nowrap;
}

.ac-login-brand .ac-kicker,
.ac-plugin .ac-login-brand .ac-kicker {
  color: var(--brass);
  /* "Member Portal" is two words in a narrow navy column; the wide tracking pushed it
     onto two lines. Keep it on one. */
  white-space: nowrap;
}

.ac-login-brand h2 {
  margin: 0.25rem 0 0;
  color: var(--ac-primary-contrast, #fff);
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: normal;
}

.ac-account-summary__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.ac-account-summary__details div {
  padding: 16px;
  background: rgba(251, 248, 241, 0.78);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
}

.ac-account-summary__details dt {
  color: var(--copper);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ac-account-summary__details dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-weight: 800;
}

.section-subtitle {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.1;
}

.help-card {
  text-align: center;
}

.help-card p {
  color: var(--muted);
}

.doc-row h4,
.form-row b,
.reservation-row b,
.mini-list b,
.notice-list b {
  color: var(--ink);
}

.doc-row .btn {
  white-space: nowrap;
}

.info-item span,
.action-tile span {
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.action-tile {
  min-height: 116px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--ink);
}

.action-tile span {
  display: block;
  margin: 0;
}

.map-card {
  min-height: 240px;
}

.map-card--embed {
  background: #dfe8da;
}

.map-card--embed::before,
.map-card--embed::after {
  display: none;
}

.map-card--embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 960px) {
  .layout-docs,
  .contact-grid,
  .dashboard,
  .dashboard-lower,
  .forms-help {
    grid-template-columns: 1fr;
  }

  .doc-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .doc-row > .meta,
  .doc-row > .actions {
    grid-column: 2;
  }

  .doc-row > .actions {
    justify-content: flex-start;
  }

  .quick-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile live-site fidelity pass: keep the WordPress render usable and intentional. */
@media (max-width: 700px) {
  html,
  body.ccboi-theme {
    max-width: 100%;
    overflow-x: hidden;
  }

  .wrap,
  .container,
  .hero-content {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .utility {
    height: 34px;
    font-size: 11px;
    letter-spacing: 0.12em;
  }

  .utility .wrap {
    justify-content: center;
    padding-left: 14px;
    padding-right: 14px;
  }

  .header {
    z-index: 50;
  }

  .header .wrap {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .brand {
    min-width: 0;
    gap: 12px;
  }

  .brand-logo {
    width: 58px;
    height: 58px;
  }

  .brand-title {
    font-size: 28px;
    letter-spacing: 0.08em;
  }

  .brand-sub {
    margin-top: 6px;
    font-size: 9px;
    letter-spacing: 0.18em;
    line-height: 1.35;
  }

  .ccboi-nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border-color: rgba(8, 40, 61, 0.2);
    background: #fffdf9;
    box-shadow: 0 12px 24px rgba(8, 40, 61, 0.08);
  }

  .ccboi-nav-toggle span:not(.screen-reader-text) {
    width: 22px;
    height: 2px;
    margin: 0 !important;
    background: var(--ink);
  }

  .ccboi-nav-wrap {
    position: absolute;
    top: calc(100% + 10px);
    left: 20px;
    right: 20px;
    display: none !important;
    width: auto;
    padding: 16px;
    background: rgba(251, 248, 241, 0.98);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 22px 44px rgba(7, 33, 43, 0.16);
  }

  .ccboi-nav-wrap.is-open {
    display: block !important;
  }

  .nav,
  .nav .ccboi-nav__list {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .nav .ccboi-nav__list a,
  .nav > .btn {
    width: 100%;
    justify-content: center;
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .nav .ccboi-nav__list li + li {
    border-top: 1px solid var(--line-soft);
  }

  .nav > .btn {
    margin-top: 12px;
  }

  .home-hero {
    min-height: auto;
    align-items: flex-start;
    background:
      linear-gradient(180deg, rgba(251, 248, 241, 0.92) 0%, rgba(251, 248, 241, 0.82) 54%, rgba(251, 248, 241, 0.96) 100%),
      url("../images/hero-chambers-bay.jpg") center top / cover no-repeat;
  }

  .pattern,
  .page-hero .pattern {
    display: none;
  }

  .hero-content {
    padding-top: 44px;
    padding-bottom: 28px;
  }

  /*
   * Wraps rather than truncates. These were clipped to one line with an ellipsis, which
   * is fine for an eyebrow that nearly fits and wrong for the one that carries the
   * association's name: on a phone "CHAMBERS CREEK BOAT OWNERS INCORPORATED" arrived as
   * "CHAMBERS CREEK BOAT OWNERS INCORPORA", cut mid-word. A clipped organisation name
   * reads as a broken page. Two lines of 11px caps cost about 16px of height, which is
   * the cheaper of the two.
   */
  .kicker,
  .eyebrow {
    display: flex;
    max-width: 100%;
    min-width: 0;
    align-items: flex-start;
    gap: 10px;
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: 0.16em;
  }

  .kicker span,
  .eyebrow span {
    min-width: 0;
  }

  /*
   * The rule is a 4px bar and the row is now as tall as the wrapped text, so centring it
   * would float it beside the gap between the two lines. Nudge it to sit on the optical
   * centre of the FIRST line instead: (11px * 1.45 - 4px) / 2 ≈ 6px.
   */
  .kicker::before,
  .eyebrow::before {
    width: 42px;
    flex: 0 0 42px;
    margin-top: 6px;
  }

  .home-hero h1 {
    max-width: 330px;
    font-size: clamp(39px, 11vw, 46px);
    line-height: 0.96;
    letter-spacing: -0.045em;
  }

  .lead {
    max-width: 21rem;
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.62;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hero-actions .btn {
    width: 100%;
    min-height: 52px;
  }

  .coordinates {
    display: none;
  }

  .quick-panel {
    width: auto;
    max-width: none;
    margin: 0 20px;
    transform: translateY(16px);
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .quick-panel::before {
    opacity: 0.28;
  }

  .quick-cell {
    min-width: 0;
    display: grid;
    grid-template-columns: 38px 1fr;
    column-gap: 14px;
    align-items: center;
    padding: 18px 20px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .quick-cell:first-child {
    display: block;
    padding-top: 22px;
    padding-bottom: 16px;
    border-top: 0;
  }

  .quick-title {
    margin: 0;
    font-size: 28px;
    line-height: 1;
  }

  .quick-icon {
    grid-row: 1 / span 3;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
  }

  .quick-cell h3,
  .quick-cell p,
  .quick-cell .link {
    min-width: 0;
  }

  .quick-cell h3 {
    margin-top: 0;
    font-size: 16px;
  }

  .quick-cell p {
    margin-bottom: 8px;
    font-size: 12px;
  }

  .section {
    padding: 64px 20px;
  }

  .section .container {
    padding-left: 0;
    padding-right: 0;
  }

  .split {
    gap: 34px;
  }

  .section h2 {
    max-width: 9em;
    font-size: clamp(34px, 10vw, 44px);
  }

  .copy {
    max-width: 22rem;
    font-size: 16px;
    line-height: 1.62;
  }

  .feature-grid {
    border-top: 1px solid var(--line);
  }

  .feature {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 16px;
    padding: 24px 20px;
  }

  .feature .icon svg {
    width: 28px;
    height: 28px;
  }

  .section-events {
    gap: 18px;
  }

  .section-events > div:first-child {
    text-align: left;
  }

  .section-events > div:first-child h2 {
    max-width: 8ch;
  }

  .event-card {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
  }

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

  .gallery img {
    height: 150px;
  }

  .page-hero {
    min-height: auto;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(251, 248, 241, 0.94) 0%, rgba(251, 248, 241, 0.84) 58%, rgba(251, 248, 241, 0.98) 100%),
      url("../images/hero-chambers-bay.jpg") center top / cover no-repeat;
  }

  .page-hero .kicker {
    max-width: 31ch;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  .page-hero .hero-content {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .page-hero h1 {
    max-width: 330px;
    font-size: clamp(42px, 12vw, 52px);
    line-height: 0.96;
    letter-spacing: -0.045em;
  }

  .portal-tabs {
    margin-top: -18px;
    padding-left: 20px;
    padding-right: 20px;
  }

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

  .tab {
    min-height: 48px;
    padding: 13px 10px;
    font-size: 13px;
  }

  .tab.active {
    color: var(--copper);
  }

  .toolbar,
  .card-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ac-account-summary,
  .ac-account-summary__details {
    grid-template-columns: 1fr;
  }

  .ac-access-panel,
  .ac-account-summary {
    padding: 24px;
    border-radius: 22px;
  }

  .ac-kicker {
    max-width: 100%;
    align-items: flex-start;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .ac-kicker::before {
    margin-top: 0.55em;
  }

  .ac-card-list,
  .ac-link-grid {
    grid-template-columns: 1fr;
  }

  .ac-dashboard,
  .ac-section,
  .ac-card,
  .ac-actions,
  .ac-detail-list,
  .ac-list-stacked li {
    min-width: 0;
    max-width: 100%;
  }

  .ac-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .ac-button,
  button.ac-button,
  .ac-actions .button,
  .ac-form button {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  .editorial-page {
    gap: 24px;
  }

  .editorial-split,
  .harbor-note,
  .timeline-panel {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .editorial-copy {
    padding-top: 0;
  }

  .editorial-copy p,
  .harbor-note > p,
  .event-feature p {
    font-size: 15px;
    line-height: 1.66;
  }

  .stat-band {
    grid-template-columns: 1fr 1fr;
    border-radius: 22px;
  }

  .stat-band div {
    min-height: 96px;
    padding: 20px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .stat-band div:nth-child(-n + 2) {
    border-top: 0;
  }

  .stat-band div:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  .value-grid,
  .event-showcase {
    grid-template-columns: 1fr;
  }

  .event-showcase {
    grid-template-areas: none;
  }

  .event-feature,
  .event-feature:first-child,
  .event-feature:nth-child(2),
  .event-feature:nth-child(3) {
    grid-area: auto;
  }

  .value-grid article {
    min-height: 220px;
    padding: 24px;
  }

  .value-grid span {
    top: 18px;
    right: 20px;
    font-size: 58px;
  }

  .event-feature {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 16px;
    padding: 22px;
    border-radius: 22px;
  }

  .event-feature .date {
    width: 62px;
    height: 72px;
  }

  .event-feature .date strong {
    font-size: 31px;
  }

  .timeline-panel,
  .harbor-note {
    padding: 24px;
    border-radius: 22px;
  }

  .event-timeline li {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
  }

  .event-timeline li::before {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .layout-docs,
  .forms-help,
  .dashboard,
  .dashboard-lower,
  .contact-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .card,
  .card-pad,
  .doc-list,
  .help-card,
  .portal-plugin-output {
    min-width: 0;
    max-width: 100%;
  }

  .doc-row,
  .reservation-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }

  .doc-row > *,
  .reservation-row > *,
  .form-row > * {
    min-width: 0;
  }

  .doc-row h4,
  .doc-row p,
  .help-card p,
  .form-row p,
  .reservation-row p {
    overflow-wrap: anywhere;
  }

  .help-card p {
    max-width: 26ch;
    margin-left: auto;
    margin-right: auto;
  }

  .doc-row > .meta,
  .doc-row > .actions {
    grid-column: 2;
    justify-self: start;
  }

  .doc-row .btn,
  .form-row .btn,
  .help-card .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  .reservation-row .thumb {
    display: none;
  }

  .reservation-row .status {
    grid-column: 2;
    justify-self: start;
  }

  .reservation-row {
    align-items: start;
    padding: 18px 0;
  }

  .reservation-row > p:empty {
    display: none;
  }

  .reservation-row > div:not(.date) {
    grid-column: 2;
  }

  .reservation-row > p:has(.status) {
    grid-column: 2;
    justify-self: start;
    margin: 0;
  }

  .reservation-row .date {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 56px;
    min-height: 64px;
  }

  .reservation-row .status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
  }

  .portal-summary .btn,
  .dashboard .btn {
    width: fit-content;
    max-width: 100%;
  }

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

  .quick-actions {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 20px;
  }

  .action-tile {
    min-height: 0;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    text-align: left;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 15px;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .action-tile span {
    min-width: 0;
  }

  .form-grid,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    gap: 18px;
  }

  .footer .wrap {
    padding-top: 34px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .copyright {
    flex-direction: column;
    align-items: center;
  }
}

/* Final refresh overrides must remain last in the cascade. */
.home-hero {
  background: linear-gradient(90deg, #fbf8f1 0%, rgba(251, 248, 241, 0.96) 40%, rgba(251, 248, 241, 0.52) 66%, rgba(251, 248, 241, 0.08) 100%);
}

.hero-media-carousel {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-media-slide {
  position: absolute;
  inset: 0;
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(251, 248, 241, 0) 42%, rgba(6, 43, 54, 0.14) 100%),
    var(--ccboi-hero-slide-image, var(--ccboi-home-hero-image)) right center / cover no-repeat;
  animation: ccboiHeroDrift 18s ease-in-out infinite alternate;
}

.hero-media-carousel.has-multiple-slides .hero-media-slide {
  opacity: 0;
  transition: opacity 1.4s ease;
}

.hero-media-carousel.has-multiple-slides .hero-media-slide.is-active {
  opacity: 1;
}

/* Decorative "sonar wake" removed per client request (the odd patterned square
   on the right of the hero image). */
.hero-media-wake {
  display: none;
}

.quick-panel--water {
  grid-template-columns: minmax(180px, 0.78fr) minmax(0, 2.2fr);
  max-width: 920px;
  margin-top: -72px;
}

.quick-panel--water .quick-cell--water {
  padding: 0;
}

.quick-panel--water .ac-section {
  margin: 0;
  padding: 0;
}

.quick-panel--water .ac-water-snapshot {
  color: #f8f1e7;
}

.quick-panel--water .ac-water-heading {
  display: none;
}

.quick-panel--water .ac-water-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.quick-panel--water .ac-water-card {
  min-height: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  padding: 28px 26px;
}

.quick-panel--water .ac-water-card span,
.quick-panel--water .ac-meta {
  color: var(--brass);
  font-size: 11px;
  font-weight: 900;
}

.quick-panel--water .ac-water-card strong {
  color: var(--ink);
  font-family: var(--serif);
}

.quick-panel--water .ac-water-card p,
.quick-panel--water .ac-water-card small,
.quick-panel--water .ac-message {
  color: #304b54;
}

.quick-panel--water .ac-water-source {
  display: none;
}

.contact-hub__split {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  margin-bottom: 24px;
}

.contact-hub,
.contact-hub * {
  min-width: 0;
}

.contact-hub .card {
  max-width: 100%;
}

.contact-hub__about,
.contact-hub__contact {
  align-self: start;
}

.contact-hub__about.card-pad,
.contact-hub__contact.card-pad {
  padding: 24px;
}

.contact-hub__about h2,
.contact-hub__contact h2 {
  margin-bottom: 14px;
}

.contact-hub__about p:not(.eyebrow),
.contact-hub__contact p:not(.eyebrow) {
  font-size: 15px;
  line-height: 1.45;
}

.contact-hub__contact .info-list {
  gap: 12px;
}

.contact-hub__contact .info-item {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(8, 51, 65, 0.1);
}

.contact-hub__contact .info-item p:empty {
  display: none;
}

.contact-hub__contact .info-item > p {
  grid-column: 2;
}

.contact-hub__contact .info-item > span {
  grid-column: 1;
  grid-row: 1;
}

.contact-hub__contact .info-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.contact-hub__contact .info-item span {
  font-size: 11px;
}

.contact-hub__contact .emergency {
  padding: 12px 14px;
}

.contact-hub__contact .emergency p {
  margin: 3px 0 6px;
  font-size: 13px;
  line-height: 1.35;
}

.contact-map-card h3,
.contact-form-card .eyebrow {
  margin-bottom: 10px;
}

.contact-map-card h3,
.contact-form-card h3 {
  margin-bottom: 14px;
}

.contact-form-card .ac-section,
.contact-form-card .ac-contact-form,
.contact-form-card .ac-content {
  margin: 0;
}

.contact-form-card .ac-contact-form__form {
  display: grid;
  gap: 12px;
}

.contact-form-card .ac-contact-form__grid {
  display: grid;
  gap: 10px 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-form-card .ac-contact-form__form p {
  margin: 0;
}

.contact-form-card .ac-contact-form__form label {
  display: block;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.03em;
  margin-bottom: 5px;
}

.contact-form-card .ac-contact-form__form input,
.contact-form-card .ac-contact-form__form textarea {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(8, 51, 65, 0.16);
  border-radius: 12px;
  background: rgba(255, 252, 246, 0.92);
  color: var(--ink);
  font: inherit;
}

.contact-form-card .ac-contact-form__form input {
  height: 40px;
}

.contact-form-card .ac-contact-form__form textarea {
  min-height: 96px;
  resize: vertical;
}

.contact-form-card .ac-contact-form__form .ac-button {
  justify-self: start;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--chrome-navy);
  color: #fffaf0;
  font-weight: 800;
}

.contact-form-card .ac-message {
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(8, 51, 65, 0.12);
  border-radius: 16px;
  background: #fff7ea;
}

/* The map card owns its own column layout rather than inheriting a flex context
   from whichever section it sits in — it used to rely on `.contact-lower > .card`,
   so relocating it beside the inquiry form collapsed the map to its min-height
   and left dead space in the card. */
.contact-map-card {
  display: flex;
  flex-direction: column;
}

.contact-map-card .map-card {
  flex: 1;
  min-height: 322px;
}

.contact-map-card .meta {
  margin-top: 12px;
  margin-bottom: 0;
}

.stat-band--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px;
}

.contact-hub__board {
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 24px;
}

.board-carousel .ac-section {
  margin: 0;
  padding: 0;
}

.board-carousel .ac-section > h2 {
  display: none;
}

/*
 * The scroller itself — grid, column flow, overflow, snapping — comes from the plugin's
 * carousel layout now. All that is left here is room for the card shadow, which would
 * otherwise be clipped by the overflow.
 *
 * Nothing here may set grid-auto-columns. That was the whole rule's job before, and while
 * it existed it outranked the plugin's --ac-rail-card, so the phone kept full-width cards
 * and the next face never peeked.
 */
.board-carousel .ac-card-list {
  padding: 4px 4px 14px;
}

.board-carousel .ac-card {
  min-width: 240px;
  background: #fffdf8;
  border-color: rgba(8, 51, 65, 0.13);
  border-radius: 22px;
  box-shadow: 0 16px 35px rgba(8, 51, 65, 0.08);
}

.board-carousel .ac-board-photo {
  max-width: 96px;
}

/*
 * The rail itself — arrows, edge fade, keyboard access, the scroll-position state — now
 * belongs to association-core, which emits data-ac-rail for layout="carousel" and wraps
 * the list in .ac-rail. What stays here is only what is particular to this club: the size
 * of a card, and how much of the next face should show on a phone.
 *
 * Both are exposed by the plugin as custom properties for exactly this, so nothing below
 * has to fight its selectors.
 */
.board-carousel .ac-rail {
  --ac-rail-card: min(55vw, 300px);
  --ac-rail-fade: 56px;
}

/*
 * The shadow room this theme adds is deliberately uneven — 4px above the cards, 14px
 * below — so the plugin's plain top: 50% lands five pixels under the middle of the card
 * row. The plugin cannot know that; the padding is ours, so the correction is too.
 */
.board-carousel .ac-rail__nav {
  top: calc(50% - 5px);
}

.social-carousel {
  overflow: hidden;
  padding: 54px 24px;
  background:
    linear-gradient(180deg, rgba(245, 239, 228, 0.4), rgba(245, 239, 228, 0.96)),
    var(--cream);
}

.social-carousel__intro,
.social-carousel__track {
  max-width: var(--max);
  margin: 0 auto;
}

.social-carousel__intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.social-carousel__intro h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 62px);
  letter-spacing: -0.045em;
}

.social-carousel__track {
  display: grid;
  grid-auto-columns: minmax(260px, 360px);
  grid-auto-flow: column;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
}

.social-card {
  position: relative;
  min-height: 245px;
  overflow: hidden;
  border-radius: 26px;
  background: var(--navy-900);
  box-shadow: var(--shadow-soft);
  scroll-snap-align: start;
}

.social-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  transition: transform 0.6s ease;
}

.social-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(6, 43, 54, 0.82));
}

.social-card span {
  position: absolute;
  z-index: 1;
  left: 22px;
  right: 22px;
  bottom: 20px;
  color: #fff7ea;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1;
}

.social-card--clubhouse::before {
  background-image: url("../images/gallery_clubhouse.jpg");
}

.social-card--boat::before {
  background-image: url("../images/gallery_boat.jpg");
}

.social-card--marina::before {
  background-image: url("../images/gallery_marina.jpg");
}

.social-card--mountain::before {
  background-image: url("../images/gallery_mountain.jpg");
}

@media (max-width: 760px) {
  .home-hero {
    background: linear-gradient(180deg, rgba(251, 248, 241, 0.92) 0%, rgba(251, 248, 241, 0.82) 54%, rgba(251, 248, 241, 0.96) 100%);
  }

  .hero-media-slide {
    background:
      linear-gradient(180deg, rgba(251, 248, 241, 0.3), rgba(251, 248, 241, 0.86)),
      var(--ccboi-hero-slide-image, var(--ccboi-home-hero-image)) center top / cover no-repeat;
  }

  .quick-panel--water {
    grid-template-columns: 1fr;
    margin: 12px 16px 0;
    transform: none;
  }

  .quick-panel--water .quick-cell:first-child {
    display: block;
  }

  .quick-panel--water .quick-cell--water {
    display: block;
    padding: 0;
  }

  .quick-panel--water .ac-water-grid {
    grid-template-columns: 1fr;
  }

  .quick-panel--water .ac-water-card {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 20px;
  }

  .contact-hub__split,
  .stat-band--compact {
    grid-template-columns: 1fr;
  }

  .social-carousel__track {
    grid-auto-columns: minmax(78vw, 1fr);
  }

  /*
   * A director's card was 280px inside a 283px rail, so the next face sat completely
   * off-screen and nothing suggested the roster moved at all — ten people, twelve swipes.
   * The plugin narrows the card from --ac-rail-card and sizes its own arrows down here;
   * this one rule is the part it cannot do for us.
   *
   * grid-template-columns has to be cleared rather than overridden: the 280px comes from
   * `.ccboi-public-content .ac-card-list` further down this file, and while that explicit
   * track exists the cards size to it and grid-auto-columns is never consulted — which is
   * also why both of the list's own classes are named, to beat a rule that matches at
   * equal specificity and sits later.
   */
  .board-carousel .ac-card-list.ac-board-directory__list {
    grid-template-columns: none;
  }

  .board-carousel .ac-rail {
    --ac-rail-fade: 28px;
  }

  .social-carousel {
    padding: 42px 16px;
  }

  .social-carousel__intro {
    display: block;
  }
}

/* Footer-matched harbor conditions: flat, quieter, and tied to the site chrome. */
.quick-panel.quick-panel--water {
  /*
   * Four visible boxes from three children: the middle one is the plugin's water snapshot,
   * which splits itself into two cards. 1fr 2fr 1fr therefore gives all four the same
   * width. The previous ratios left the outlook cell at 206px against the water cards'
   * 246px, and the uneven column was what threw the three icons off a shared line.
   *
   * This is the rule that decides it — the base .quick-panel one further up is overridden
   * here and editing it does nothing.
   */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  background: var(--chrome-navy) !important;
  border-color: rgba(213, 177, 91, 0.22);
  box-shadow: none;
}

.quick-panel.quick-panel--water .quick-cell--water,
.quick-panel.quick-panel--water .ac-water-snapshot,
.quick-panel.quick-panel--water .ac-water-grid,
.quick-panel.quick-panel--water .ac-water-card {
  background: transparent !important;
  /*
   * Top-align rather than centre. Every box in this row is the same height and padding,
   * but each centred its own content — and the contents differ in height, so the three
   * icons landed at 26px, 35px and 61px from the top and never shared a line. Starting
   * them all at the padding edge is what actually aligns the symbols; equal column widths
   * alone did not.
   */
  align-content: start;
}

.quick-panel.quick-panel--water .ac-water-snapshot {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.quick-panel.quick-panel--water .ac-water-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 14px;
  min-height: 168px;
  padding: 26px 24px;
  border: 0;
  border-left: 1px solid rgba(245, 239, 228, 0.14);
  border-radius: 0 !important;
  box-shadow: none !important;
}

.quick-panel.quick-panel--water .ac-water-icon {
  grid-row: 1 / span 4;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #d5b15b;
  border: 1px solid rgba(213, 177, 91, 0.38);
  border-radius: 999px;
  background: rgba(255, 247, 234, 0.06);
}

.quick-panel.quick-panel--water .ac-water-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.quick-panel.quick-panel--water .ac-water-card span,
.quick-panel.quick-panel--water .quick-label,
.quick-panel.quick-panel--water .ac-meta {
  color: #d5b15b;
}

.quick-panel.quick-panel--water .quick-title,
.quick-panel.quick-panel--water .ac-water-card strong,
.quick-panel.quick-panel--water .quick-cell--monthly strong {
  color: #fff7ea;
  /*
   * Top-align rather than centre. Every box in this row is the same height and padding,
   * but each centred its own content — and the contents differ in height, so the three
   * icons landed at 26px, 35px and 61px from the top and never shared a line. Starting
   * them all at the padding edge is what actually aligns the symbols; equal column widths
   * alone did not.
   */
  align-content: start;
}

.quick-panel.quick-panel--water .ac-water-card p,
.quick-panel.quick-panel--water .ac-water-card small,
.quick-panel.quick-panel--water .ac-message,
.quick-panel.quick-panel--water .quick-cell--monthly small {
  color: #d8e8e6;
}

/* Match the forecast/tide cards: 42px icon column + content, same min-height. */
.quick-panel.quick-panel--water .quick-cell--monthly {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 7px;
  column-gap: 14px;
  min-height: 168px;
  padding: 26px 24px;
  color: #fff7ea;
  text-decoration: none;
  background: transparent !important;
  border-left: 1px solid rgba(245, 239, 228, 0.14);
  box-shadow: none;
}

/* Give the calendar glyph the same circular brass badge as .ac-water-icon. */
.quick-panel.quick-panel--water .quick-cell--monthly .quick-icon {
  /* Row 1 only. It used to span both rows so the headline sat beside it in column 2;
     the headline now runs the full width of the cell underneath. */
  grid-row: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  gap: 0;
  color: #d5b15b;
  border: 1px solid rgba(213, 177, 91, 0.38);
  border-radius: 999px;
  background: rgba(255, 247, 234, 0.06);
}

.quick-panel.quick-panel--water .quick-cell--monthly .quick-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.7;
}

.quick-panel.quick-panel--water .quick-cell--monthly:hover,
.quick-panel.quick-panel--water .quick-cell--monthly:focus {
  background: rgba(255, 247, 234, 0.04) !important;
  color: #fff7ea;
}

@media (max-width: 760px) {
  .quick-panel.quick-panel--water {
    grid-template-columns: 1fr;
  }

  .quick-panel.quick-panel--water .ac-water-grid {
    grid-template-columns: 1fr;
  }

  .quick-panel.quick-panel--water .ac-water-card {
    min-height: 0;
    padding: 20px;
    border-left: 0;
    border-top: 1px solid rgba(245, 239, 228, 0.14);
  }

  .quick-panel.quick-panel--water .quick-cell--monthly {
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 14px;
    min-height: 0;
    padding: 20px;
    border-left: 0;
    border-top: 1px solid rgba(245, 239, 228, 0.14);
  }
}

/* Weather outlook now uses the same table + padded card as the tide list, so its
   bespoke shell (zero padding, header divider, row grid) has been removed. This is all
   that remains: the date line under each period name. */
.tide-data-page .ac-weather-outlook__date {
  margin-left: 6px;
  white-space: nowrap;
  color: #53656b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}


/* Dynamic social connector cards supplied by association-core. */
.social-card.ac-social-moments__card::before {
  background-image: var(--ac-social-image);
}

.social-card.ac-social-moments__card a {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: inherit;
  text-decoration: none;
}

.social-card.ac-social-moments__card a span {
  z-index: 3;
}

/* CCBOI homepage social moments: traditional photo-gallery treatment. */
.ac-social-moments.social-carousel {
  overflow: visible;
  padding: 72px 24px;
  border-top: 1px solid rgba(8, 51, 65, 0.1);
  background: #fbf7ee;
}

.ac-social-moments .social-carousel__intro {
  display: block;
  max-width: 760px;
  margin: 0 auto 30px;
  text-align: center;
}

.ac-social-moments .social-carousel__intro .eyebrow {
  justify-content: center;
}

.ac-social-moments .social-carousel__intro h2 {
  max-width: none;
  margin-top: 8px;
  font-size: clamp(34px, 4.6vw, 58px);
}

.ac-social-moments .social-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 342px);
  grid-template-columns: none;
  gap: 22px;
  max-width: var(--max);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 4px 18px;
  scroll-padding-left: 4px;
  scroll-snap-type: x mandatory;
  scrollbar-color: rgba(8, 51, 65, 0.42) rgba(8, 51, 65, 0.08);
  scrollbar-width: thin;
}

.ac-social-moments .social-carousel__track::-webkit-scrollbar {
  height: 10px;
}

.ac-social-moments .social-carousel__track::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(8, 51, 65, 0.08);
}

.ac-social-moments .social-carousel__track::-webkit-scrollbar-thumb {
  border: 2px solid #fbf7ee;
  border-radius: 999px;
  background: rgba(8, 51, 65, 0.42);
}

.ac-social-moments .social-card.ac-social-moments__card {
  display: grid;
  grid-template-rows: minmax(180px, auto) auto;
  min-height: 0;
  aspect-ratio: auto;
  overflow: hidden;
  border: 1px solid rgba(8, 51, 65, 0.12);
  border-radius: 20px;
  background: #fffdf8;
  box-shadow: 0 18px 42px rgba(8, 51, 65, 0.1);
  scroll-snap-align: start;
}

.ac-social-moments .social-card.ac-social-moments__card::before {
  position: relative;
  inset: auto;
  display: block;
  aspect-ratio: 4 / 3;
  width: 100%;
  background-image: var(--ac-social-image);
  background-position: center;
  background-size: cover;
  transform: none;
}

.ac-social-moments .social-card.ac-social-moments__card::after {
  display: none;
}

.ac-social-moments .social-card.ac-social-moments__card > span,
.ac-social-moments .social-card.ac-social-moments__card a span {
  position: relative;
  inset: auto;
  display: block;
  min-height: 72px;
  padding: 17px 18px 18px;
  color: var(--ink);
  background: #fffdf8;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.ac-social-moments .social-card.ac-social-moments__card a {
  position: relative;
  inset: auto;
  z-index: 2;
  display: contents;
  color: inherit;
  text-decoration: none;
}

@media (max-width: 980px) {
  .ac-social-moments .social-carousel__track {
    grid-auto-columns: minmax(255px, 44vw);
  }
}

@media (max-width: 560px) {
  .ac-social-moments.social-carousel {
    padding: 52px 18px;
  }

  .ac-social-moments .social-carousel__intro {
    text-align: left;
  }

  .ac-social-moments .social-carousel__intro .eyebrow {
    justify-content: flex-start;
  }

.ac-social-moments .social-carousel__track {
    grid-auto-columns: minmax(250px, 86vw);
  }
}

/* Documents page: prototype-inspired document center. */
.ccboi-documents-hero {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(8, 51, 65, 0.1);
  background:
    linear-gradient(90deg, rgba(251, 248, 241, 0.98) 0%, rgba(251, 248, 241, 0.93) 42%, rgba(251, 248, 241, 0.58) 57%, rgba(251, 248, 241, 0.06) 78%),
    linear-gradient(0deg, rgba(8, 51, 65, 0.18), rgba(8, 51, 65, 0.02)),
    var(--ccboi-page-hero-image, url("../images/hero-chambers-bay.jpg")) right center / cover no-repeat;
}

/* Decorative framed-photo overlay removed per client request — this was the
   "weird square" on the right side of the interior hero. */
.ccboi-documents-hero::after {
  display: none;
}

/* Decorative dotted pattern removed per client request (matches removing the
   hero "sonar wake" on the homepage). */
.ccboi-documents-hero__pattern {
  display: none;
}

.ccboi-documents-hero__content {
  position: relative;
  z-index: 1;
  padding-top: 82px;
  padding-bottom: 82px;
}

.ccboi-documents-hero .ccboi-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--copper);
}

.ccboi-documents-hero .ccboi-kicker::before {
  content: "";
  width: 46px;
  height: 4px;
  flex: 0 0 46px;
  border-radius: 999px;
  background: var(--brass);
}

.ccboi-public-hero h1 {
  max-width: 760px;
}

.ccboi-documents-hero h1 {
  max-width: 760px;
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: clamp(44px, 5vw, 68px);
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.ccboi-documents-coordinates {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  color: #587078;
  font-size: 12px;
  font-weight: 800;
}

.ccboi-documents-coordinates span:first-child {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(8, 51, 65, 0.18);
  border-radius: 999px;
  color: var(--chrome-navy);
  background: rgba(255, 253, 248, 0.78);
}

.ccboi-documents-section {
  padding: 72px 0;
  background: #fbf7ee;
}

.ccboi-public-section {
  min-height: 520px;
}

.ccboi-public-content {
  display: block;
}

.ccboi-public-content > .portal-plugin-output,
.ccboi-public-content > .editorial-page,
.ccboi-public-content > .contact-hub {
  margin: 0;
}

.ccboi-public-content .portal-plugin-output > .ac-section {
  margin: 0;
}

.ccboi-public-content .portal-plugin-output > .ac-section > h2 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: clamp(30px, 3.2vw, 44px);
  letter-spacing: -0.04em;
}

.ccboi-public-content .ac-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.ccboi-public-content .ac-card,
.ccboi-public-content .card {
  border-radius: 22px;
  background: #fffdf8;
  border-color: rgba(8, 51, 65, 0.13);
  box-shadow: 0 18px 42px rgba(8, 51, 65, 0.08);
}

.ccboi-public-content .event-feature,
.ccboi-public-content .harbor-note,
.ccboi-public-content .events-calendar-main,
.ccboi-public-content .events-day-panel {
  border-radius: 22px;
  background-color: #fffdf8;
  border-color: rgba(8, 51, 65, 0.13);
  box-shadow: 0 18px 42px rgba(8, 51, 65, 0.08);
}

.ccboi-documents-layout {
  display: grid;
  grid-template-columns: 255px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.ccboi-documents-sidebar {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 26px;
}

.side-title {
  margin: 0;
  color: var(--copper);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sidebar-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 11px;
  color: #273f48;
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
}

.sidebar-list a:hover,
.sidebar-list a:focus {
  background: rgba(8, 51, 65, 0.06);
}

.sidebar-list a.active {
  color: #fff7ea;
  background: var(--chrome-navy);
}

.pill {
  min-width: 30px;
  padding: 2px 9px;
  border-radius: 999px;
  color: #43525a;
  background: #ede6db;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.active .pill {
  color: #fff7ea;
  background: rgba(255, 255, 255, 0.16);
}

.documents-help-card,
.documents-card {
  border: 1px solid rgba(8, 51, 65, 0.13);
  border-radius: 22px;
  background: #fffdf8;
  box-shadow: 0 18px 42px rgba(8, 51, 65, 0.08);
}

.documents-help-card {
  padding: 24px;
  text-align: center;
}

.documents-help-card__icon {
  color: var(--copper);
  font-size: 42px;
  line-height: 1;
}

.documents-help-card h3,
.documents-card h3 {
  margin: 10px 0 10px;
}

.documents-help-card p,
.documents-card p {
  color: #53656b;
}

.documents-toolbar {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.documents-search,
.documents-select {
  width: 100%;
  border: 1px solid rgba(8, 51, 65, 0.16);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  padding: 13px 14px;
}

.documents-select {
  max-width: 190px;
  color: #354a51;
}

.documents-library-panel {
  display: grid;
  gap: 24px;
}

.documents-library-panel .ac-section {
  margin: 0;
}

.documents-library-panel .ac-section h2 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: -0.035em;
}

.ac-document-rows {
  overflow: hidden;
  padding: 0;
  border-radius: 22px;
}

.ac-document-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 125px 140px;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid rgba(8, 51, 65, 0.1);
}

.ac-document-row:last-child {
  border-bottom: 0;
}

.ac-file-icon {
  width: 42px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: #c65f3b;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.ac-file-icon--doc,
.ac-file-icon--docx {
  background: #4f86bf;
}

.ac-file-icon--xls,
.ac-file-icon--xlsx {
  background: #4f9562;
}

.ac-document-row h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 19px;
  letter-spacing: -0.02em;
}

.ac-document-row .ac-meta {
  margin: 0 0 5px;
  color: var(--copper);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.ac-document-row .ac-content,
.ac-document-row .ac-content p,
.ac-document-row__body > p {
  margin: 0;
  color: #59686d;
  font-size: 13px;
  line-height: 1.45;
}

.ac-document-row__meta {
  display: grid;
  gap: 4px;
  color: #69777c;
  font-size: 12px;
  text-align: right;
}

.ac-document-row__actions {
  display: flex;
  justify-content: flex-end;
}

.ac-document-row__actions .ac-button,
.documents-card .btn,
.documents-help-card .btn {
  width: max-content;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(8, 51, 65, 0.17);
  color: var(--chrome-navy);
  box-shadow: none;
  font-size: 13px;
}

.ac-document-row__actions .ac-button:hover,
.documents-card .btn:hover,
.documents-help-card .btn:hover {
  color: #fff7ea;
  background: var(--chrome-navy);
}

.ac-document-row__message {
  margin: 0;
  font-size: 12px;
}

.documents-forms-help {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 24px;
  margin-top: 28px;
}

.documents-card {
  padding: 26px;
}

.documents-card--help {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.documents-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(8, 51, 65, 0.1);
}

.documents-form-row:last-of-type {
  border-bottom: 0;
}

.documents-form-row strong {
  display: block;
  color: var(--ink);
}

.documents-form-row p {
  margin: 3px 0 0;
  font-size: 13px;
}

.documents-link {
  display: inline-flex;
  margin-top: 14px;
  color: var(--chrome-navy);
  font-weight: 900;
  text-decoration: none;
}

.documents-card .meta {
  margin: 16px 0 0;
  color: #69777c;
  font-size: 12px;
}

@media (max-width: 980px) {
  .ccboi-documents-hero {
    background:
      linear-gradient(90deg, rgba(251, 248, 241, 0.98), rgba(251, 248, 241, 0.78)),
      url("../images/hero-chambers-bay.jpg") center / cover no-repeat;
  }

  .ccboi-documents-hero::after {
    inset: auto 22px 22px auto;
    width: 190px;
    height: 112px;
    opacity: 0.62;
  }

  .ccboi-documents-layout,
  .documents-forms-help {
    grid-template-columns: 1fr;
  }

  .ccboi-documents-sidebar {
    position: static;
  }

  .sidebar-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ac-document-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .ac-document-row__meta,
  .ac-document-row__actions,
  .ac-document-row__message {
    grid-column: 2;
    text-align: left;
    justify-content: start;
  }
}

@media (max-width: 620px) {
  .ccboi-documents-section {
    padding: 48px 0;
  }

  .documents-toolbar {
    display: grid;
    gap: 12px;
  }

  .documents-select {
    max-width: none;
  }

  .sidebar-list {
    grid-template-columns: 1fr;
  }

  .documents-form-row {
    grid-template-columns: 1fr;
  }
}

/* Events page calendar replacing the old seasonal rhythm block. */
.events-calendar-panel {
  margin-top: 34px;
  max-width: 100%;
  overflow: hidden;
}

.events-calendar-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.72fr);
  gap: 18px;
  align-items: stretch;
  max-width: 100%;
}

.events-calendar-main,
.events-day-panel {
  min-width: 0;
  border: 1px solid rgba(8, 51, 65, 0.13);
  border-radius: 22px;
  background: #fffdf8;
  box-shadow: 0 18px 42px rgba(8, 51, 65, 0.08);
}

.events-calendar-main {
  padding: 18px;
}

.events-calendar-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  margin-bottom: 16px;
  padding: 0 56px;
  text-align: center;
}

.events-calendar-toolbar h2 {
  margin: 2px 0 0;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 0.95;
  text-align: center;
}

.events-calendar-toolbar .eyebrow {
  justify-content: center;
  margin: 0;
  font-size: 10px;
  text-align: center;
}

.events-calendar-toolbar .eyebrow::before {
  width: 30px;
  height: 3px;
}

.calendar-nav {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(8, 51, 65, 0.18);
  border-radius: 999px;
  color: var(--chrome-navy);
  background: #fff7ea;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  transform: translateY(-50%);
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.calendar-nav[data-calendar-prev] {
  left: 0;
}

.calendar-nav[data-calendar-next] {
  right: 0;
}

.calendar-nav:hover,
.calendar-nav:focus {
  color: #fff7ea;
  background: var(--chrome-navy);
  transform: translateY(calc(-50% - 1px));
}

.events-calendar-weekdays,
.events-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.events-calendar-weekdays {
  margin-bottom: 7px;
  color: var(--copper);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.events-calendar-grid {
  overflow: hidden;
  border: 1px solid rgba(8, 51, 65, 0.12);
  border-radius: 16px;
  background: rgba(8, 51, 65, 0.1);
  gap: 1px;
}

.calendar-day {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 72px;
  padding: 9px;
  border: 0;
  color: var(--ink);
  background: #fffaf1;
  cursor: pointer;
  text-align: left;
}

.calendar-day strong {
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1;
}

.calendar-day span {
  width: max-content;
  max-width: 100%;
  padding: 3px 6px;
  border-radius: 999px;
  color: #fff7ea;
  background: var(--copper);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.calendar-day.is-muted {
  color: rgba(8, 51, 65, 0.36);
  background: rgba(255, 250, 241, 0.55);
}

.calendar-day.is-today {
  box-shadow: inset 0 0 0 2px rgba(213, 177, 91, 0.9);
}

.calendar-day.is-selected {
  color: #fff7ea;
  background: var(--chrome-navy);
}

.calendar-day.is-selected span {
  color: var(--chrome-navy);
  background: #f2c86d;
}

.calendar-day.has-events:not(.is-selected) {
  background: #f8ecd7;
}

.events-day-panel {
  display: grid;
  align-content: start;
  padding: 24px;
}

.events-day-panel h3 {
  margin: 4px 0 16px;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 0.98;
}

.events-day-list {
  display: grid;
  gap: 14px;
}

.events-day-card {
  padding: 16px;
  border: 1px solid rgba(8, 51, 65, 0.12);
  border-radius: 16px;
  background: #fff7ea;
}

.events-day-card h4 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 20px;
}

.events-day-card .meta {
  margin-bottom: 10px;
  color: var(--copper);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.events-day-card p:last-child,
.events-day-empty {
  margin-bottom: 0;
  color: #304b54;
}

@media (max-width: 860px) {
  .events-calendar-shell {
    grid-template-columns: 1fr;
  }

  .events-calendar-main,
  .events-day-panel {
    width: 100%;
  }

  .events-day-panel {
    padding: 22px;
  }
}

@media (max-width: 560px) {
  .events-calendar-main,
  .events-day-panel {
    border-radius: 22px;
  }

  .events-calendar-main {
    padding: 14px;
  }

  .events-calendar-toolbar {
    min-height: 54px;
    padding: 0 44px;
  }

  .events-calendar-toolbar h2 {
    font-size: 27px;
  }

  .events-calendar-toolbar .eyebrow {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  .events-calendar-toolbar .eyebrow::before {
    width: 20px;
  }

  .calendar-nav {
    width: 36px;
    height: 36px;
    font-size: 21px;
  }

  .events-calendar-weekdays {
    font-size: 9px;
    letter-spacing: 0.06em;
  }

  .calendar-day {
    min-height: 48px;
    padding: 7px;
  }

  .calendar-day strong {
    font-size: 17px;
  }

  .calendar-day span {
    width: 7px;
    height: 7px;
    overflow: hidden;
    padding: 0;
    color: transparent;
  }

  .events-day-panel {
    padding: 20px;
  }
}

/* Interior heroes sit on a flat light gradient, so their subtext uses the dark
   page-title color for readability. */
.ccboi-page-hero__lede,
.ccboi-hero__lede,
.page-hero .hero-content .lead {
  color: var(--ink);
  text-shadow: none;
}

/* Hero readability.
   `.home-hero`'s cream gradient is the element's own background, but
   `.hero-media-carousel` is an absolutely-positioned CHILD, so the photo painted on top
   of the scrim and the text sat directly on the picture. Measured behind the text, the
   photo spans luminance 0.004–0.955 — near-black to near-white — so NO single text
   colour works: white hit 1.04:1 on the bright water, ink 1.38:1 on the dark trees.
   The scrim has to sit above the photo, which is what this overlay does. It paints
   after the slides but below `.hero-content` (z-index 1), so it never dims the text. */
.home-hero .hero-media-carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Direction C: brand navy gradient. A dark scrim grades the photograph rather than
     bleaching it — the cream wash it replaced washed the left half out to almost nothing.
     Falls to 0.08 by 92% so the marina still reads at full strength on the right. */
  background: linear-gradient(
    90deg,
    rgba(8, 40, 61, 0.92) 0%,
    rgba(8, 40, 61, 0.80) 40%,
    rgba(8, 40, 61, 0.42) 66%,
    rgba(8, 40, 61, 0.08) 92%
  );
}

/* Light type on the navy scrim. */
.home-hero .hero-content h1 {
  color: #fff7ea;
}

.home-hero .hero-content .lead {
  color: rgba(255, 253, 249, 0.94);
  text-shadow: none;
}

.home-hero .hero-content .kicker {
  color: var(--brass);
}

.home-hero .coordinates,
.home-hero .coordinates span {
  color: rgba(255, 253, 249, 0.78);
}

/* Home "About" block — moved off the Contact page at the client's request. On
   Contact it sat in a 2-column grid, so its measure was roughly half of --max;
   dropped into a full-width container a single paragraph would run past 150
   characters per line, so the card splits heading from prose to keep it readable. */
.home-about {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 34px;
  align-items: start;
}

.home-about__intro h2 {
  margin: 0;
}

.home-about__body {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
}

@media (max-width: 860px) {
  .home-about {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}



/* ─────────────────────────────────────────────────────────────────────────────
   Single classified listing (single-ac_classified.php)
   ───────────────────────────────────────────────────────────────────────────── */

/* The plugin ships its own palette on :root — Fraunces for serif, #c0842d for
   accent — which put a second serif and a third orange on the classifieds pages
   alongside the brand's Cormorant and copper. Remapped onto the brand tokens,
   scoped to the classifieds surfaces so the rest of the plugin's output on the
   site is untouched. */
/* Submit / edit / My Listings replace the list on the same page rather than
   nesting inside it, so .ac-classifieds-section is absent on those views —
   they need naming here or a member sees Fraunces and ochre on the one part
   of classifieds they use most. */
.listing-head,
.listing-body,
.ac-classifieds-section,
.ac-classified-submit-wrap,
.ac-classified-edit-wrap,
.ac-my-classifieds-wrap {
  --ac-ink: var(--ink);
  --ac-muted: var(--muted);
  --ac-line: var(--line-soft);
  --ac-primary: var(--navy-800);
  --ac-primary-ink: #fff;
  --ac-accent: var(--copper);
  --ac-accent-soft: rgba(184, 95, 60, 0.12);
  --ac-soft: var(--cream);
  --ac-surface-soft: var(--cream);
  --ac-paper: var(--fog);
  --ac-card-shadow: var(--soft-shadow);
  --ac-font-display: var(--serif);
  --ac-font-body: var(--sans);
}

.listing-head {
  padding: 40px 0 28px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--fog) 100%);
  border-bottom: 1px solid var(--line-soft);
}

.listing-head__back {
  display: inline-block;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.listing-head__back:hover { color: var(--copper); }

.listing-head__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.listing-tag {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.listing-tag--featured {
  border-color: transparent;
  background: var(--brass);
  color: var(--ink);
}

.listing-tag--members {
  border-color: transparent;
  background: var(--navy-800);
  color: #fff;
}

.listing-head__title {
  margin: 0;
  max-width: 20ch;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

/* The one loud element on the page. A classified is a number attached to a
   thing, so the asking price is set as display type rather than as a data
   field — same Cormorant and tight tracking as the site's headings. */
.listing-head__price {
  position: relative;
  display: inline-block;
  margin: 22px 0 0;
  padding-top: 18px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.listing-head__price::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 2px;
  background: var(--brass);
}

.listing-head__price--closed {
  color: var(--muted);
  font-size: clamp(22px, 2.4vw, 30px);
}

.listing-head__price--closed::before { background: var(--line); }

.listing-body { padding: 36px 0 64px; }

/* The plugin view sets its own max-width for the no-template case; inside this
   template the wrap already constrains it. */
.listing-body .ac-classified-single-wrap {
  max-width: none;
  margin: 0;
  padding: 0;
}

.listing-body .ac-classified-single-body {
  max-width: 68ch;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink);
}

@media (max-width: 640px) {
  .listing-head { padding: 26px 0 22px; }
  .listing-head__back { margin-bottom: 16px; }
}

/*
 * Ribbon rhythm. Equal columns and top-aligned icons got the symbols onto one line, but
 * the rows below them still did not agree: the labels wrap to one, two or three lines
 * depending on their text, so each value started at a different height (66px, 49px, 91px)
 * and the boxes ended with bottom gaps of 25px, 42px and 26px.
 *
 * Reserving two lines for every label fixes the values; trimming the horizontal padding
 * and the icon gutter buys back the width that caused the ragged wrapping in the first
 * place — the panel is capped at 920px for four boxes, so the content column was under
 * 100px.
 */
.quick-panel.quick-panel--water .ac-water-card,
.quick-panel.quick-panel--water .quick-cell--monthly {
  padding: 26px 18px;
  column-gap: 12px;
  grid-template-columns: 38px minmax(0, 1fr);
}

.quick-panel.quick-panel--water .ac-water-card > span,
.quick-panel.quick-panel--water .quick-cell--monthly .quick-label {
  /*
   * Match the icon's box and centre in it. Reserving two lines kept the three labels level
   * with each other, but they were pinned to the top of a 34px box while the icon centres
   * in a 42px one — so the words sat above the middle of the symbol beside them. Same
   * height, both centred, and a one-line label reads level with its icon.
   */
  align-self: start;
  display: grid;
  align-content: center;
  min-height: 42px;
  margin: 0;
}

/* The water cards span their icon down every row, so row one is sized by the label. The
   outlook cell left its icon in row one alone, which made that row 42px tall — the icon's
   height — instead of the label's 34px, and dropped its value a row below the others. */
.quick-panel.quick-panel--water .quick-cell--monthly .quick-icon {
  grid-row: 1 / -1;
}

/*
 * The description was auto-placing into column one — the 38px icon column — so it sat
 * under the icon at 38px wide and broke into four lines: "Tide / tables / & / weather".
 * It belongs under the label, in the text column, where it reads as one or two.
 */
.quick-panel.quick-panel--water .quick-cell--monthly small {
  /*
   * Centred across the whole cell. It was in column 2, which began it 56px in — the
   * icon's 42px column plus the 14px gap — so it hung off to one side under an icon and
   * label it was not aligned with. Flush left was no better: it then sat 50px left of the
   * label above it. Centring is what the cell wants, because the headline is the only
   * thing on its row and the row is the full width of the card.
   * The icon now occupies row 1 only, which frees row 2 to span both columns.
   */
  grid-column: 1 / -1;
  text-align: center;
  /*
   * Sized to match "Marina conditions" at the other end of the ribbon. This line does the
   * same job the temperature and the tide state do in the cells between them — it is the
   * cell's headline, not a footnote — and at 13px Manrope it read as one.
   */
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.06;
  /* Same cream as "Marina conditions". It was inheriting the muted #d8e8e6 used for the
     cards' footnotes, which is the right colour for a footnote and the wrong one for a
     line meant to read as this cell's headline. Letter-spacing left at normal to match. */
  color: #fff7ea;
  letter-spacing: normal;
}

/* The brand cell carries no icon, so it has nothing to line up with and centring is what
   stops it ending in 70-odd pixels of dead space. */
.quick-panel.quick-panel--water .quick-cell:first-child {
  align-content: center;
}