.ef-arch-story{--ef-arch-story-line:rgba(255,255,255,.58);--ef-arch-story-shadow:0 28px 58px rgba(48,39,32,.18)}
.ef-arch-story.ef-tone--night{--ef-arch-story-line:rgba(255,255,255,.42);--ef-arch-story-shadow:0 30px 65px rgba(0,0,0,.28)}
.ef-arch-story__grid{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);align-items:center;gap:clamp(54px,9vw,140px)}
.ef-arch-story--image-right .ef-arch-story__grid{grid-template-columns:minmax(0,1.28fr) minmax(280px,.72fr)}
.ef-arch-story--image-right .ef-arch-story__media{order:2}.ef-arch-story--image-right .ef-arch-story__copy{order:1}
.ef-arch-story__media{position:relative;width:min(100%,430px);aspect-ratio:3/4;margin:0;overflow:hidden;border-radius:999px 999px 0 0;background:rgba(44,44,44,.08)}
.ef-arch-story__media.has-shadow{box-shadow:var(--ef-arch-story-shadow)}
.ef-arch-story__media img,.ef-arch-story__media .ef-placeholder{display:block;width:100%;height:100%;object-fit:cover}
.ef-arch-story__inner-line{position:absolute;inset:4.5% 4.5% 3.5%;border:1px solid var(--ef-arch-story-line);border-radius:999px 999px 0 0;pointer-events:none}
.ef-arch-story__copy{max-width:720px}
.ef-arch-story__copy h2{max-width:680px;font-size:var(--ef-heading-lg);line-height:.98}
.ef-arch-story__lead{max-width:700px;margin-top:0!important;font-size:clamp(1.08rem,1.3vw,1.28rem)!important;line-height:1.55!important}
.ef-arch-story__text{max-width:700px;margin-top:1.35rem;color:var(--ef-colour-muted)}
.ef-tone--night .ef-arch-story__text{color:rgba(255,255,255,.72)}
.ef-arch-story .ef-button{margin-top:1.8rem}
@media(max-width:900px){.ef-arch-story__grid,.ef-arch-story--image-right .ef-arch-story__grid{grid-template-columns:1fr}.ef-arch-story--image-right .ef-arch-story__media,.ef-arch-story--image-right .ef-arch-story__copy{order:initial}.ef-arch-story__media{width:min(78vw,430px)}.ef-arch-story__copy{max-width:760px}}
@media(max-width:620px){.ef-arch-story__grid{gap:42px}.ef-arch-story__media{width:min(88vw,390px)}.ef-arch-story__inner-line{inset:4% 4% 3%}}

/* v0.18.1 monogram and navy treatment */
.ef-arch-story__copy{position:relative;isolation:isolate}
.ef-arch-story__copy-inner{position:relative;z-index:1}
.ef-arch-story__monogram{position:absolute;z-index:0;left:50%;top:50%;width:min(72%,360px);height:auto;max-width:none;transform:translate(-50%,-50%);opacity:.042;pointer-events:none;user-select:none}
.ef-tone--night .ef-arch-story__monogram,.ef-tone--navy .ef-arch-story__monogram{filter:brightness(0) invert(1);opacity:.065}
.ef-arch-story.ef-tone--navy{--ef-arch-story-line:rgba(255,255,255,.42);--ef-arch-story-shadow:0 30px 65px rgba(0,0,0,.28)}
.ef-tone--navy .ef-arch-story__text{color:rgba(255,255,255,.72)}
@media(max-width:680px){
 .ef-arch-story__copy.has-monogram{min-height:clamp(300px,82vw,430px)}
 .ef-arch-story__monogram{display:block;left:54%;top:46%;width:min(82%,320px);opacity:.05}
 .ef-tone--night .ef-arch-story__monogram,.ef-tone--navy .ef-arch-story__monogram{opacity:.075}
}