.ecf-home .ecf-main { max-width: none; padding: 0 0 var(--ecf-space-8); }
.ecf-home .ecf-main > :not(.ecf-hero) { width: min(calc(100% - 2 * var(--ecf-gutter)), calc(var(--ecf-page-max) - 2 * var(--ecf-gutter))); margin-inline: auto; }
.ecf-home .ecf-header { background: #080a0b; color: #e8e5df; border-bottom: 1px solid #30322f; }
.ecf-home .ecf-header a, .ecf-home .ecf-header button { color: #d9cdb6; }
.ecf-home .ecf-header a:hover, .ecf-home .ecf-header button:hover { color: #fff6e4; }
.ecf-home .ecf-header .ecf-mark { color: #c4ac80; }
.ecf-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 680px; padding: 100px max(var(--ecf-gutter), calc((100% - var(--ecf-page-max)) / 2 + var(--ecf-gutter))) 110px; background: #080a0b; color: #e8e5df; }
.ecf-hero-copy { position: relative; z-index: 2; max-width: 560px; width: 50%; gap: 24px; }
.ecf-hero .ecf-eyebrow { color: #c9b58f; font-size: 12px; letter-spacing: .13em; }
.ecf-hero .ecf-h1 { font-family: var(--ecf-font-book); font-size: clamp(40px, 4.4cqi, 60px); font-weight: 400; letter-spacing: -.025em; line-height: 1.08; text-wrap: pretty; }
.ecf-hero .ecf-lede { color: #c3c3b8; font-size: 21px; max-width: 42ch; line-height: 1.45; }
.ecf-hero .ecf-small { color: #a9afa5; }
.ecf-hero .ecf-input { background: #171b19; color: #f3eee3; border-color: #555a4e; }
.ecf-hero .ecf-input::placeholder { color: #b2b7ab; }
.ecf-hero .ecf-input:focus-visible, .ecf-hero button:focus-visible { outline-color: #e9d3a5; }
.ecf-hero .ecf-btn--primary { background: #d4be97; color: #191b18; }
.ecf-hero .ecf-btn--primary:hover { background: #eddbb9; color: #191b18; }
.ecf-hero-art { position: absolute; z-index: 0; top: 0; right: -10%; bottom: 0; width: 85%; margin: 0; }
.ecf-hero-art canvas, .ecf-hero-art img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mask-image: linear-gradient(90deg, transparent 0%, #0002 18%, #000 44%, #000 90%, transparent), linear-gradient(transparent, #000 13%, #000 85%, transparent); mask-composite: intersect; }
.ecf-hero-art canvas { opacity: 0; transition: opacity .5s; }
.ecf-hero-art img { transition: opacity .5s; }
.ecf-hero-art[data-hero-state=playing] canvas, .ecf-hero-art[data-hero-state=paused] canvas { opacity: 1; }
.ecf-hero-art[data-hero-state=playing] img, .ecf-hero-art[data-hero-state=paused] img { opacity: 0; }
.ecf-hero-caption { position: absolute; z-index: 1; left: 36%; right: 15%; bottom: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 15px; color: #d4c6af; }
.ecf-hero-caption > span:first-child { font-style: italic; }
.ecf-hero-caption .ecf-small { font-size: 12px; }
.ecf-hero-caption .ecf-btn { margin-left: auto; color: #c3c9bd; font-size: 12px; }
[data-theme="light"] .ecf-home .ecf-header,
[data-theme="light"] .ecf-hero { background: #c4ae88; color: var(--ecf-color-ink); --ecf-color-ink-muted: #483522; --ecf-color-rubric: #7e2419; }
[data-theme="light"] .ecf-home .ecf-header { border-bottom-color: var(--ecf-color-rule); }
[data-theme="light"] .ecf-home .ecf-header a,
[data-theme="light"] .ecf-home .ecf-header button { color: var(--ecf-color-ink); }
[data-theme="light"] .ecf-home .ecf-header a:hover,
[data-theme="light"] .ecf-home .ecf-header button:hover,
[data-theme="light"] .ecf-home .ecf-header .ecf-mark,
[data-theme="light"] .ecf-hero .ecf-eyebrow { color: var(--ecf-color-rubric); }
[data-theme="light"] .ecf-hero .ecf-lede,
[data-theme="light"] .ecf-hero .ecf-small,
[data-theme="light"] .ecf-hero-caption,
[data-theme="light"] .ecf-hero-caption .ecf-btn { color: var(--ecf-color-ink-muted); }
[data-theme="light"] .ecf-hero .ecf-input { background: var(--ecf-color-surface-raised); color: var(--ecf-color-ink); border-color: var(--ecf-color-rule-strong); }
[data-theme="light"] .ecf-hero .ecf-input::placeholder { color: var(--ecf-color-ink-muted); }
[data-theme="light"] .ecf-hero .ecf-input:focus-visible,
[data-theme="light"] .ecf-hero button:focus-visible { outline-color: var(--ecf-color-focus); }
[data-theme="light"] .ecf-hero .ecf-btn--primary { background: var(--ecf-color-rubric); color: var(--ecf-color-on-rubric); }
[data-theme="light"] .ecf-hero .ecf-btn--primary:hover { background: var(--ecf-color-rubric-strong); }
@container (max-width: 959px) {
  .ecf-hero { padding-top: 76px; min-height: 680px; }
  .ecf-hero-copy { width: 56%; }
  .ecf-hero .ecf-h1 { font-size: 44px; }
  .ecf-hero .ecf-lede { font-size: 19px; }
  .ecf-hero-art { width: 95%; right: -23%; }
  .ecf-hero-caption { left: 40%; right: 27%; }
}
@container (max-width: 719px) {
  .ecf-hero { min-height: 900px; padding-top: 48px; padding-bottom: 430px; }
  .ecf-hero-copy { width: 100%; max-width: 520px; gap: 20px; }
  .ecf-hero .ecf-h1 { font-size: clamp(36px, 7cqi, 46px); }
  .ecf-hero .ecf-eyebrow { font-size: 11px; }
  .ecf-hero .ecf-lede { font-size: 19px; }
  .ecf-hero-art { top: auto; right: 0; bottom: 0; width: 100%; height: 420px; }
  .ecf-hero-art img, .ecf-hero-art canvas { mask-image: linear-gradient(transparent, #000 14%, #000 85%, transparent); mask-composite: add; }
  .ecf-hero-caption { left: var(--ecf-gutter); right: var(--ecf-gutter); bottom: 15px; justify-content: center; }
}