/* UX008 only. The complete editorial arrangement is the no-JS/default layout. */
.caeli-site .caeli-home-hero { --caeli-hero-styled: 1; --caeli-hero-inset: 89px; --caeli-hero-height: calc(100svh - var(--caeli-hero-inset)); background: var(--caeli-rose,#ecddda); width: 100%; margin: 0; padding: 0; isolation: isolate; }
.caeli-home-hero__panel { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2.5fr) minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); gap: 24px clamp(20px,2.2vw,40px); align-items: center; box-sizing: border-box; min-height: var(--caeli-hero-height); padding: clamp(24px,3vw,48px) clamp(24px,4vw,76px); }
.caeli-home-hero__heading { grid-column: 1/-1; grid-row: 1; text-align: center; position: relative; z-index: 2; }
.caeli-home-hero__heading .caeli-eyebrow { margin: 0 0 16px; }
.caeli-site .caeli-home-hero h1 { font: 400 clamp(3.2rem,6vw,7rem)/1.06 var(--caeli-font-heading); letter-spacing: -.035em; margin: 0; max-width: none; overflow-wrap: anywhere; }
.caeli-home-hero__copy { grid-column: 1; grid-row: 2; position: relative; z-index: 2; min-width: 0; }
.caeli-home-hero__copy .caeli-lead { font-size: 1rem; line-height: 1.7; margin: 0; max-width: 25ch; }
.caeli-home-hero__media { grid-column: 2; grid-row: 2; margin: 0; min-width: 0; height: calc(var(--caeli-hero-height) * .54); }
.caeli-home-hero__target { height: calc(100% - 32px); width: 100%; }
.caeli-home-hero__shell { position: relative; width: 100%; height: 100%; background: #fff; transform-origin: 50% 50%; }
.caeli-site .caeli-home-hero__image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.caeli-home-hero__credit { position: relative; z-index: 2; margin-top: 12px; font-size: .6875rem; line-height: 1.5; text-align: center; }
.caeli-home-hero__actions { grid-column: 3; grid-row: 2; position: relative; z-index: 2; min-width: 0; }
.caeli-site .caeli-home-hero__actions .caeli-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; box-sizing: border-box; max-width: 100%; padding: 14px 18px; white-space: normal; }
.caeli-home-hero__actions .caeli-caption { margin: 16px 0 0; font-size: .75rem; line-height: 1.6; max-width: 26ch; }
.caeli-home-hero :focus-visible { outline: 2px solid var(--caeli-ink); outline-offset: 5px; }
.caeli-home-hero__image-failure:not([hidden]) { display: grid; place-items: center; height: 100%; padding: 24px; box-sizing: border-box; text-align: center; }
.caeli-home-hero[data-hero-image-failed] .caeli-home-hero__image { display: none; }
/* UX008A: an overlay only; neither the image nor the existing composition changes. */
.caeli-home-hero__target { position: relative; }
.caeli-site .caeli-home-hero__arrivals { position: absolute; z-index: 3; left: 50%; bottom: max(40px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: calc(100% - 32px); box-sizing: border-box; color: #fff; font: 400 .75rem/1.5 var(--caeli-font-body); letter-spacing: .12em; text-align: center; text-decoration: none; white-space: nowrap; }
.caeli-home-hero__arrivals > span { padding: 8px 18px; background: rgb(27 23 24 / 82%); text-decoration: underline; text-decoration-color: rgb(255 255 255 / 75%); text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* Global focus margin is 128px; this visible bottom overlay needs no extra scroll margin. */
.caeli-site .caeli-home-hero__arrivals:focus-visible { scroll-margin-block: 0; }
@media (min-width:1024px) and (min-height:720px) and (prefers-reduced-motion:no-preference) {
    .caeli-home-hero:is([data-hero-pending],[data-hero-motion]) .caeli-home-hero__target { position: static; }
    .caeli-home-hero[data-hero-motion] .caeli-home-hero__arrivals { opacity: var(--caeli-hero-arrivals-opacity,1); }
    .caeli-home-hero[data-hero-motion][data-hero-arrivals-hidden] .caeli-home-hero__arrivals { visibility: hidden; pointer-events: none; }
    /* Keep an already focused link usable without seeking or reshaping the hero. */
    .caeli-home-hero[data-hero-motion] .caeli-home-hero__arrivals:focus { opacity: 1; visibility: visible; pointer-events: auto; }
    .caeli-home-hero:is([data-hero-pending],[data-hero-motion]) .caeli-home-hero__panel { height: var(--caeli-hero-height); min-height: 0; }
    .caeli-home-hero:is([data-hero-pending],[data-hero-motion]) .caeli-home-hero__shell { position: absolute; inset: 0; z-index: 0; }
    .caeli-home-hero[data-hero-pending]:not([data-hero-motion]) :is(.caeli-home-hero__heading,.caeli-home-hero__copy,.caeli-home-hero__actions,.caeli-home-hero__credit) { opacity: 0; }
    .caeli-home-hero[data-hero-pending]:not([data-hero-motion]) .caeli-home-hero__actions { pointer-events: none; }
    .caeli-home-hero[data-hero-motion]:not([data-hero-actions-ready]) .caeli-home-hero__actions { pointer-events: none; }
    /* Focus reveals the final arrangement without seeking the timeline or changing scroll. */
    .caeli-home-hero[data-hero-motion][data-hero-focus]:not(:has(.caeli-home-hero__arrivals:focus)) .caeli-home-hero__shell { transform: var(--caeli-hero-final-transform) !important; }
    .caeli-home-hero[data-hero-motion][data-hero-focus]:not(:has(.caeli-home-hero__arrivals:focus)) :is(.caeli-home-hero__heading,.caeli-home-hero__copy,.caeli-home-hero__actions,.caeli-home-hero__credit) { opacity: 1 !important; transform: none !important; pointer-events: auto; }
}
@media (max-width:575px) {
    /* Keep the requested inset on narrow static photographs and a 44px tap target. */
    .caeli-site .caeli-home-hero__arrivals { bottom: 35px; }
    .caeli-home-hero__arrivals > span { padding: 4px 12px; }
}
@media (max-width:1023px), (max-height:719px) {
    .caeli-home-hero__panel { display: flex; flex-direction: column; align-items: stretch; gap: 24px; min-height: 0; padding: 32px clamp(18px,5vw,48px); }
    .caeli-site .caeli-home-hero h1 { font-size: clamp(3.2rem,9vw,5.4rem); }
    .caeli-home-hero__heading { text-align: left; }
    .caeli-home-hero__copy .caeli-lead { max-width: 38ch; }
    .caeli-home-hero__media { width: 100%; height: auto; }
    .caeli-home-hero__target { height: auto; aspect-ratio: 3/2; max-height: 480px; }
    .caeli-home-hero__shell { min-height: 160px; }
    .caeli-home-hero__actions .caeli-caption { max-width: 38ch; }
}