/* /about (C3): the founding photograph and the About copy as two shores of prose, the burgee settling, the harbor
   office (the cove from a fixed camera at the harbor wall while weather passes), the stance as a deep two-shore rule
   list, the plan. Text hover: letters lift in a wave, 12ms a character. */

/* ---------- the founding ---------- */
.ab-open { padding-top: clamp(24px, 2.8vw, 56px); }
.ab-open__h1 { padding-left: var(--gutter); margin-bottom: clamp(18px, 2.2vw, 44px); }
.ab-open__photo { min-height: clamp(420px, 42vw, 1100px); border-radius: 0 4px 4px 0; }
.ab-open__copy { display: flex; align-items: center; padding-block: clamp(4px, 1vw, 24px); }
.ab-prose { font-size: clamp(1.0625rem, 1.02vw, 1.3125rem); line-height: 1.58; }
.ab-open__copy .ab-prose > p:first-child::first-line { font-family: var(--font-head); font-weight: 500; font-variation-settings: "wdth" 90, "opsz" 96; }
.ab-burgee { position: absolute; left: clamp(16px, 2vw, 40px); bottom: clamp(16px, 2vw, 40px); z-index: 2; padding: clamp(12px, 1.2vw, 20px) clamp(14px, 1.4vw, 24px);
  background: rgba(237, 240, 243, .76); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(60, 69, 80, .22); }
.ab-burgee .rc-burgee { width: clamp(96px, 8vw, 168px); height: auto; }

/* ---------- the harbor office ---------- */
.ab-harbor { position: relative; overflow: hidden; background: #C9D0D8; min-height: max(640px, calc(100vh - var(--header-h))); display: flex; }
.ab-harbor__shores { position: static; flex: 1 1 auto; padding: clamp(40px, 5vw, 110px) var(--gutter); align-items: center; }
.ab-harbor__shores::before { background: var(--raven); opacity: .4; z-index: 1; }
.ab-harbor__text { position: relative; z-index: 2; }
.ab-plate { position: relative; padding: clamp(24px, 3vw, 64px); border-radius: 4px;
  background: rgba(237, 240, 243, .8); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); box-shadow: inset 0 0 0 1px rgba(60, 69, 80, .24), 0 30px 60px -40px rgba(14, 24, 38, .5); }
.ab-plate::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--raven); opacity: .55; }
.ab-harbor__view { position: static; align-self: stretch; min-height: 100%; }
.ab-harbor__host { position: absolute; inset: 0; z-index: 0; }
.ab-harbor__host canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ab-harbor__canvas { transition: opacity 1s var(--ease-swell); }
.ab-harbor.is-live .ab-harbor__canvas { opacity: 0; }
.ab-harbor__gl { opacity: 0; transition: opacity 1.2s var(--ease-swell); }
.ab-harbor.is-live .ab-harbor__gl { opacity: 1; }

/* ---------- the stance and the plan ---------- */
.ab-stance__h2 { margin-bottom: clamp(24px, 3.4vw, 64px); }
.ab-stance__shores { align-items: stretch; }
.ab-rules { display: grid; align-content: start; --row-rule: var(--rule-deep); }
.ab-rule { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(16px, 1.6vw, 28px); align-items: start; padding: clamp(18px, 1.7vw, 30px) 0; }
.ab-rule:first-child { box-shadow: inset 0 1px 0 var(--rule-deep); }
.ab-rule .rc-ico { color: var(--mist); width: clamp(28px, 2.2vw, 40px); height: clamp(28px, 2.2vw, 40px); stroke-width: 1.3; margin-top: 2px; }
.ab-rule p { margin: 0; color: var(--water); font-size: clamp(1.0625rem, 1.02vw, 1.3125rem); line-height: 1.5; }
.ab-rule strong { display: block; margin-bottom: 6px; color: var(--mist); font-family: var(--font-head); font-weight: 500; font-size: clamp(1.3rem, 1.7vw, 2.25rem); line-height: 1.12; font-variation-settings: "wdth" 88, "opsz" 96; }
.ab-close { margin-top: clamp(40px, 5vw, 110px); max-width: calc(50% - clamp(24px, 3vw, 64px) / 2); display: grid; gap: clamp(24px, 2.4vw, 44px); justify-items: start; }
.ab-close__line { margin: 0; color: var(--mist); font-family: var(--font-head); font-weight: 500; font-size: clamp(1.75rem, 2.9vw, 4.5rem); line-height: 1.1; letter-spacing: -.01em;
  font-variation-settings: "wdth" 86, "opsz" 96; text-wrap: balance; }
.ab-close__cta { margin: 0; }

/* ---------- phones and tablets ---------- */
@media (max-width: 899.98px) {
  .ab-open__h1 { padding-left: 0; }
  .ab-open__photo { min-height: 78vw; border-radius: 0; }
  .ab-harbor { display: block; min-height: 0; background: var(--mist); }
  .ab-harbor__shores { padding: 0 var(--gutter) 48px; }
  .ab-harbor__view { position: relative; order: -1; min-height: 0; height: 86vw; margin-inline: calc(-1 * var(--gutter)); }
  .ab-harbor__host { position: absolute; }
  .ab-plate { padding: 24px 0 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .ab-plate::after { display: none; }
  .ab-close { max-width: none; justify-items: stretch; }
  .ab-close__cta .btn { width: 100%; }
}