/* Nell Calder, marriage celebrant (example site by Matt's Websites). Layout, type scale and motion numbers follow the
   design notes for this build; the words, photos, ridges and wordmark are our own. Prefix: evm-. */
@font-face{font-family:"EVM Display";src:url("/examples/elena-vale-modern/assets/fonts/libre-caslon-display-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EVM Text";src:url("/examples/elena-vale-modern/assets/fonts/figtree-300-500.woff2") format("woff2");font-weight:300 500;font-style:normal;font-display:swap}
/* local fallbacks sized to the web fonts (scripts/font-fallbacks.mjs), so text barely moves when they arrive */
@font-face{font-family:"EVM Display Fb";src:local("Georgia");font-style:normal;size-adjust:83.2%;ascent-override:116.6%;descent-override:32.4%;line-gap-override:0.0%}
@font-face{font-family:"EVM Text Fb";src:local("Arial"),local("ArialMT");font-style:normal;size-adjust:99.7%;ascent-override:95.3%;descent-override:25.1%;line-gap-override:0.0%}

:root{--evm-olive:#41453D;--evm-cream:#F4F1E5;--evm-yellow:#FEFADB;--evm-sage:#8C957D;
  --evm-serif:"EVM Display","EVM Display Fb",Georgia,"Times New Roman",serif;
  --evm-sans:"EVM Text","EVM Text Fb",Helvetica,Arial,sans-serif}
html{background:var(--evm-cream);color:var(--evm-olive);font-family:var(--evm-sans);font-size:100%;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-ligatures:none;text-rendering:optimizeLegibility;
  scroll-behavior:auto;scroll-padding-top:0}
body{margin:0;background:var(--evm-cream);color:var(--evm-olive);font-size:16px;line-height:1.5;font-weight:300;letter-spacing:-.02em}
::selection{background:var(--evm-sage);color:var(--evm-cream)}
a{color:inherit;text-decoration:none}
p,ul,ol{margin:0 0 25px}
p:last-child,ul:last-child,ol:last-child{margin-bottom:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--evm-serif);font-weight:400;letter-spacing:0;margin:0;line-height:1.4}
img{display:block;max-width:100%;height:auto}
picture{display:block}
strong,b{font-weight:500}
blockquote,figure{margin:0}
main{display:block;position:relative}
main:focus{outline:0}
.evm-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{font-family:var(--evm-sans);font-weight:400;letter-spacing:0;background:var(--evm-yellow);color:var(--evm-olive)}
.evm-c{max-width:2400px;margin:0 auto;position:relative}
html.evm-g-yellow,.evm-g-yellow body{background:var(--evm-yellow)}
.evm-on-dark{background:var(--evm-olive);color:var(--evm-yellow)}
/* every parallax wrapper is positioned, so photos always paint over the ridge lines and lettering behind them */
:where([data-px]){position:relative}

/* ---------------------------------------------------------------- section spacing (the reference's default and medium) */
.evm-hi,.evm-tr,.evm-gl,.evm-in2,.evm-cp,.evm-qt,.evm-fq,.evm-t3,.evm-tm,.evm-lt,.evm-hs,.evm-tl,.evm-sb--plain,.evm-abw,
.evm-ob2,.evm-ss,.evm-ar,.evm-kw{margin-top:75px;margin-bottom:75px}
.evm-lg,.evm-st,.evm-cta{margin-top:65px;margin-bottom:65px}
@media(min-width:61.25em){
  .evm-hi,.evm-tr,.evm-gl,.evm-in2,.evm-cp,.evm-qt,.evm-fq,.evm-t3,.evm-tm,.evm-lt,.evm-hs,.evm-tl,.evm-sb--plain,.evm-abw,
  .evm-ob2,.evm-ss,.evm-ar,.evm-kw{margin-top:150px;margin-bottom:150px}
  .evm-lg,.evm-st,.evm-cta{margin-top:95px;margin-bottom:95px}
}
@media(min-width:90em){
  .evm-hi,.evm-tr,.evm-gl,.evm-in2,.evm-cp,.evm-qt,.evm-fq,.evm-t3,.evm-tm,.evm-lt,.evm-hs,.evm-tl,.evm-sb--plain,.evm-abw,
  .evm-ob2,.evm-ss,.evm-ar,.evm-kw{margin-top:200px;margin-bottom:200px}
  .evm-lg,.evm-st,.evm-cta{margin-top:125px;margin-bottom:125px}
}

/* ---------------------------------------------------------------- type roles */
.evm-h1{font-size:40px;line-height:1.13;margin-bottom:25px;text-wrap:balance}
@media(min-width:30em){.evm-h1{font-size:50px}}
@media(min-width:46em){.evm-h1{font-size:60px}}
@media(min-width:71.875em){.evm-h1{font-size:70px}}
@media(min-width:90em){.evm-h1{font-size:90px}}
@media(min-width:100em){.evm-h1{font-size:100px}}
@media(min-width:120em){.evm-h1{font-size:110px}}
.evm-h2{font-size:30px;line-height:1.4;margin-bottom:15px;text-wrap:balance}
@media(min-width:90em){.evm-h2{font-size:40px}}
@media(min-width:100em){.evm-h2{font-size:50px}}
.evm-h3{font-size:24px;line-height:1.4;margin-bottom:10px}
@media(min-width:100em){.evm-h3{font-size:30px}}
/* small display titles (offerings, cards) sit about 6% larger than the scale: our face's x-height is smaller */
.evm-usp .evm-h3,.evm-card__t,.evm-col__t{font-size:25.5px}
@media(min-width:100em){.evm-usp .evm-h3,.evm-card__t,.evm-col__t{font-size:32px}}
.evm-lead{font-size:18px;line-height:1.5}
@media(min-width:71.875em){.evm-lead{font-size:21px}}
.evm-small{font-size:14px;line-height:1.5}

/* ---------------------------------------------------------------- buttons and links */
/* outline box: fills from the top left on hover (0.3 s ease-out), text takes the ground colour */
.evm-btn{--c:var(--evm-olive);--ch:var(--evm-cream);position:relative;z-index:1;display:inline-flex;align-items:center;
  line-height:1.49;padding:5px 28px;border:1px solid var(--c);color:var(--c);font-weight:300;white-space:nowrap;
  transition:color .3s ease-out}
.evm-btn:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:var(--c);transform:scaleX(0);
  transform-origin:top left;transition:transform .3s ease-out;z-index:-1}
.evm-btn:before{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,44px);transform:translateY(-50%)}
.evm-btn:hover,.evm-btn:focus-visible{color:var(--ch)}
.evm-btn:hover:after,.evm-btn:focus-visible:after{transform:scaleX(1)}
.evm-btn--s{font-size:14px;padding:4px 9px}
.evm-on-dark .evm-btn,.evm-k-home .evm-hd .evm-btn,.evm-k-contact .evm-hd .evm-btn,.evm-k-contact .evm-in-w .evm-btn{--c:var(--evm-yellow);--ch:var(--evm-olive)}
.evm-hd .evm-btn{transition:color .1s linear}
/* inline link: weight 400, 1 px rule 6 px under; on hover the rule shrinks to the right and grows back from the left */
.evm-il{position:relative;display:inline-flex;line-height:1;font-weight:400;padding:11px 0 17px;margin:-11px 0}
/* a short label ("Say hi") still gets a 44 px wide target */
.evm-il:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:max(100%,44px);transform:translateX(-50%)}
.evm-il:after{content:"";position:absolute;right:0;bottom:11px;width:100%;height:1px;background:currentColor;transform:scaleX(1);
  transform-origin:right center}
.evm-il:hover:after,.evm-il:focus-visible:after{animation:evm-link 1s ease-in-out}
@keyframes evm-link{0%{transform:scaleX(1);transform-origin:right center}50%{transform:scaleX(0);transform-origin:right center}
  50.01%{transform-origin:left center}to{transform:scaleX(1);transform-origin:left center}}
@keyframes evm-pulse{0%{opacity:0}30%{opacity:1}70%{opacity:1}to{opacity:0}}
.evm-lk{margin:30px 0 0}
.evm-acts{display:flex;flex-wrap:wrap;align-items:center;gap:30px 35px;margin-top:25px}

/* ---------------------------------------------------------------- header */
.evm-hd{position:relative;z-index:30;width:100%;padding:45px calc(100% / 40 * 3);color:var(--evm-olive)}
@media(min-width:61.25em){.evm-hd{padding-left:calc(100% / 40 * 2);padding-right:calc(100% / 40 * 2)}}
.evm-k-home .evm-hd{position:absolute;top:0;left:0;right:0;background:transparent;color:var(--evm-yellow)}
.evm-k-contact .evm-hd{background:var(--evm-olive);color:var(--evm-yellow)}
.evm-hd__w,.evm-ov__top{display:flex;justify-content:space-between;align-items:center}
.evm-hd__l,.evm-ov__l{width:calc(50% - 100px);text-align:left}
.evm-hd__l .evm-btn,.evm-ov__l .evm-btn{display:none}
@media(min-width:71.875em){.evm-hd__l .evm-btn,.evm-ov__l .evm-btn{display:inline-flex}}
.evm-hd__m,.evm-ov__m{width:200px;text-align:center;padding-bottom:15px}
.evm-hd__r,.evm-ov__r{width:calc(50% - 100px);display:flex;align-items:flex-end;justify-content:flex-end;text-align:right}
/* live text wordmark: Libre Caslon Display 52 px, lowercase, in a 44 px line box like the drawn mark it stands for */
.evm-wm{display:inline-block;height:44px;font:400 52px/44px var(--evm-serif);letter-spacing:-.03em;white-space:nowrap;color:inherit}
.evm-hd__m .evm-wm,.evm-ov__m .evm-wm{vertical-align:top}
/* menu button: MENU (weight 300) rolls on hover from 980; below 980 two 1 px lines, 23 x 10; the button is 44 px tall */
.evm-mt{display:inline-flex;align-items:center;justify-content:flex-end;min-width:44px;min-height:44px;margin:-17px 0;padding:0;
  border:0;background:none;color:inherit;font:inherit;letter-spacing:0;cursor:pointer}
.evm-mt__w{display:none;position:relative;overflow:hidden;font-size:20px;line-height:1;font-weight:300;text-transform:uppercase;color:transparent}
.evm-mt__b,.evm-mt__a{position:absolute;left:0;top:0;width:100%;color:var(--evm-hdc);transition:transform .4s ease-out}
.evm-mt__b{transform:translateY(0)}
.evm-mt__a{transform:translateY(105%)}
.evm-mt:hover .evm-mt__b{transform:translateY(-105%)}
.evm-mt:hover .evm-mt__a{transform:translateY(0)}
.evm-burger{display:block;position:relative;width:23px;height:10px}
.evm-burger span{position:absolute;top:50%;right:0;width:100%;height:1px;background:currentColor;transition:all .3s ease}
.evm-burger span:first-child{transform:translateY(-5px)}
.evm-burger span:last-child{transform:translateY(5px)}
@media(min-width:61.25em){.evm-mt{margin:-12px 0}.evm-mt__w{display:block}.evm-burger{display:none}}
.evm-hd{--evm-hdc:var(--evm-olive)}
.evm-k-home .evm-hd,.evm-k-contact .evm-hd{--evm-hdc:var(--evm-yellow)}

/* ---------------------------------------------------------------- menu overlay (shared contract: showcase.js opens it) */
.evm-ov{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;justify-content:space-between;overflow:auto;
  padding:0 0 55px;background:var(--evm-yellow);color:var(--evm-olive);text-align:center;
  clip-path:inset(100% 0 0 0);visibility:hidden;transition:clip-path .5s linear,visibility 0s linear .5s}
.evm-ov[data-open]{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .5s linear,visibility 0s linear 0s}
.evm-ov__top{flex:none;padding:45px calc(100% / 40 * 3)}
@media(min-width:61.25em){.evm-ov__top{padding-left:calc(100% / 40 * 2);padding-right:calc(100% / 40 * 2)}}
.evm-ov__r{opacity:0;transition:opacity .3s ease}
.evm-ov[data-open] .evm-ov__r{opacity:1;transition-delay:.5s}
/* close: a cross of 1 px lines, 25 px (37 from 980), turning 45 degrees on hover; the button is 44 px. It takes the
   pointer only once its fade has finished (0.8 s after opening, set by site.js) */
.evm-ov__x{--x:25px;position:relative;width:44px;height:44px;margin:-9.5px -9.5px -9.5px 0;padding:0;border:0;background:none;
  color:inherit;cursor:pointer;transition:transform .3s ease}
.evm-ov__x:before,.evm-ov__x:after{content:"";position:absolute;top:50%;left:50%;width:var(--x);height:1px;background:currentColor}
.evm-ov__x:before{transform:translate(-50%,-50%) rotate(45deg)}
.evm-ov__x:after{transform:translate(-50%,-50%) rotate(-45deg)}
.evm-ov__x:hover{transform:rotate(45deg)}
.evm-ready .evm-ov:not(.is-ready) .evm-ov__x{pointer-events:none}
@media(min-width:61.25em){.evm-ov__x{--x:37px;margin:-3.5px -3.5px -3.5px 0}}
.evm-ov__mid{margin:auto 0;padding:0 0 55px}
.evm-ov__ul{list-style:none;padding:0 calc(100% / 40 * 3);margin:0}
@media(min-width:61.25em){.evm-ov__ul{padding-left:calc(100% / 40 * 2);padding-right:calc(100% / 40 * 2)}}
.evm-ov__ul li{position:relative}
.evm-ov__ul>li:not(:last-child){margin-bottom:25px}
.evm-ov__ul a{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:44px;width:fit-content;margin:0 auto;font-family:var(--evm-serif);
  letter-spacing:0;line-height:1;font-size:40px;opacity:0;transform:translateY(10px);transition:transform .5s ease-out,opacity .6s ease-out}
@media(min-width:46em){.evm-ov__ul a{font-size:55px}}
/* from 980 the scale's size (--s: 55, 70, 85, 100) gives way on short windows so all five items fit without scrolling.
   --ovh is the menu's fixed height (top bar 149, bottom line 24, the two 55 paddings, four 25 gaps, 1 spare; under 800
   tall 25 paddings and 11 gaps) and --pb the room under the last item (55 + 24 + 55), which caps the hover photo */
.evm-ov__ul{--s:55px}
@media(min-width:71.875em){.evm-ov__ul{--s:70px}}
@media(min-width:90em){.evm-ov__ul{--s:85px}}
@media(min-width:100em){.evm-ov__ul{--s:100px}}
@media(min-width:61.25em){
  .evm-ov{--ovh:384px;--pb:134px}
  .evm-ov__ul{--fs:min(var(--s),max(30px,calc((100svh - var(--ovh)) / 5)))}
  .evm-ov__ul>li>a{font-size:var(--fs)}
}
@media(min-width:61.25em) and (max-height:49.99em){
  .evm-ov{--ovh:268px;--pb:74px;padding-bottom:25px}
  .evm-ov__mid{padding-bottom:25px}
  .evm-ov__ul>li:not(:last-child){margin-bottom:11px}
}
.evm-ov[data-open] .evm-ov__ul a{opacity:1;transform:translateY(0)}
.evm-ov[data-open] .evm-ov__ul li:nth-child(1) a{transition-delay:.2s}
.evm-ov[data-open] .evm-ov__ul li:nth-child(2) a{transition-delay:.4s}
.evm-ov[data-open] .evm-ov__ul li:nth-child(3) a{transition-delay:.6s}
.evm-ov[data-open] .evm-ov__ul li:nth-child(4) a{transition-delay:.8s}
.evm-ov[data-open] .evm-ov__ul li:nth-child(5) a{transition-delay:1s}
.evm-ov__sub{list-style:none;margin:8px 0 0}
.evm-ov__sub li{margin-bottom:0}
.evm-ov__ul .evm-ov__sub a{font-size:20px}
@media(min-width:61.25em){.evm-ov__sub{display:none}}
/* hover photo, desktop only: 22.22% of the menu width, centred on the item; items 2 and 4 sit right */
.evm-ov__ph{display:none}
@media(min-width:61.25em) and (hover:hover){
  .evm-ov__ph{display:block;position:absolute;left:0;top:50%;width:min(22.2222%,calc((var(--fs) + 2 * var(--pb)) * 1.5));transform:translateY(-50%);overflow:hidden;
    opacity:0;transition:opacity .1s linear;pointer-events:none}
  .evm-ov__ul>li:nth-child(2) .evm-ov__ph{margin-left:66.6667%}
  .evm-ov__ul>li:nth-child(4) .evm-ov__ph{margin-left:77.7778%}
  .evm-ov__ul>li:hover>.evm-ov__ph,.evm-ov__ul>li:focus-within>.evm-ov__ph{opacity:1}
  .evm-ov__ph img{width:100%;aspect-ratio:3/2;object-fit:cover}
}
.evm-ov__btm{flex:none;margin:0;text-transform:uppercase;animation:evm-pulse 3s infinite}
html.evm-menu-open,html.evm-menu-open body{overflow:hidden}

/* ---------------------------------------------------------------- footer */
.evm-ft{position:relative;z-index:20;background:var(--evm-yellow);color:var(--evm-olive)}
.evm-ft--cream{background:var(--evm-cream)}
.evm-ft__cols{padding:60px 0 40px}
@media(min-width:61.25em){.evm-ft__cols{padding:60px 0}}
.evm-ft__in{padding:0 calc(100% / 40 * 3)}
@media(min-width:61.25em){.evm-ft__in{display:flex;flex-wrap:wrap;padding:0}}
.evm-ft__el1{margin-bottom:55px}
.evm-ft__el1 .evm-wm{display:block;width:fit-content}
@media(min-width:61.25em){
  .evm-ft__el1{width:calc(100% / 40 * 8);margin-left:calc(100% / 40 * 2);margin-right:calc(100% / 40 * 30)}
  .evm-ft__el1 .evm-wm{position:relative;top:-10px}
  .evm-ft__el3{width:calc(100% / 40 * 12);margin-left:calc(100% / 40 * 2)}
  .evm-ft__el4{margin-left:auto;margin-right:calc(100% / 40 * 2)}
}
@media(min-width:100em){
  .evm-ft__el1{width:calc(100% / 40 * 6);margin-right:calc(100% / 40 * 7)}
  .evm-ft__el3{width:calc(100% / 40 * 6);margin-left:calc(100% / 40 * 1)}
}
.evm-ft__el3{margin-bottom:50px}
@media(min-width:61.25em){.evm-ft__el3{margin-bottom:0}}
.evm-ft__el3 ul{display:grid;grid-template-columns:min-content min-content;column-gap:40px;list-style:none;margin:0;font:400 20px/1.5 var(--evm-serif);letter-spacing:0}
.evm-ft__el3 a{white-space:nowrap}
.evm-ft__el3 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.evm-ft__el4{max-width:500px;font-size:14px;line-height:1.5}
.evm-ft__el4 p{margin:0}
.evm-ft__btm{display:flex;flex-direction:column;border-top:1px solid var(--evm-olive);padding:20px calc(100% / 40 * 3);font-size:14px;line-height:1.5}
@media(min-width:61.25em){.evm-ft__btm{flex-direction:row;justify-content:space-between;padding-left:calc(100% / 40 * 2);padding-right:calc(100% / 40 * 2)}}
.evm-ft__links{display:flex;flex-direction:column}
@media(min-width:30em){.evm-ft__links{flex-direction:row;gap:10px}}
@media(min-width:61.25em){.evm-ft__links{gap:30px}}
.evm-ft__btm a:hover{text-decoration:underline;text-underline-offset:3px}
.evm-ft__btm p{margin:0}
.evm-ft__top{margin-top:20px}
@media(min-width:61.25em){.evm-ft__top{margin-top:0}}
/* touch screens: every footer link stands 44 px tall (the reference's 30 and 21 px lines suit a pointer) */
@media (max-width:61.24em),(pointer:coarse){
  .evm-ft__el3 ul{row-gap:0}
  .evm-ft__el3 a{display:inline-block;padding:7px 0}
  .evm-ft__btm{padding-top:8.5px;padding-bottom:8.5px}
  .evm-ft__btm a{display:inline-block;padding:11.5px 0}
  .evm-ft__top{margin-top:0}
}

/* ---------------------------------------------------------------- home hero: photo, statement, masked copy of the photo */
.evm-bn{position:relative;overflow:hidden;height:815px;text-align:center;
  --fs:30px;--ln:5;--pz:0px;--pbv:250px;
  --f:min(var(--fs),max(20px,calc((100svh - 175px) / (1.4 * var(--ln)))))}
@media(min-width:46em){.evm-bn{--ln:3;--pbv:100px}}
@media(min-width:61.25em){.evm-bn{height:1000px;--fs:40px;--pz:20px;--pbv:200px}}
@media(min-width:90em){.evm-bn{height:auto;aspect-ratio:1920/1212;--fs:55px;--pbv:15vw}}
@media(min-width:100em){.evm-bn{--fs:65px}}
@media(min-width:120em){.evm-bn{--fs:75px}}
@media(min-width:2000px){.evm-bn{--fs:100px}}
@media(min-width:137.5em){.evm-bn{--pbv:14vw}}
.evm-bn__m,.evm-bn__f{position:absolute;inset:0}
.evm-bn__m{z-index:0}
.evm-bn__f{z-index:20;pointer-events:none}
.evm-bn__m img,.evm-bn__f img{position:absolute;left:0;top:0;width:100%;max-width:none;height:calc(100% + 10px);object-fit:cover;object-position:bottom center}
.evm-bn__f img{-webkit-mask-image:url("/examples/elena-vale-modern/assets/hero/aQ95ZOeNMpg-desktop-mask.webp");mask-image:url("/examples/elena-vale-modern/assets/hero/aQ95ZOeNMpg-desktop-mask.webp");
  -webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:bottom center;mask-position:bottom center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* the phone crop and its mask switch together, by the same query as the picture source */
@media(max-width:979px) and (max-aspect-ratio:1/1){.evm-bn__f img{-webkit-mask-image:url("/examples/elena-vale-modern/assets/hero/aQ95ZOeNMpg-phone-mask.webp");mask-image:url("/examples/elena-vale-modern/assets/hero/aQ95ZOeNMpg-phone-mask.webp")}}
/* the statement is centred in the banner as the reference has it, unless the window is too short for that: then it is
   centred in a box that keeps it whole between the header and the window's foot, and its size is capped by the
   window height (fold rule, every window 320 to 2560 wide and 500 tall up) */
.evm-bn__c{position:absolute;left:0;right:0;top:0;z-index:10;display:flex;align-items:center;justify-content:center;height:100%;
  height:min(100%,calc(2 * 100svh - 100px - 2 * var(--pz) - var(--ln) * 1.4 * var(--f) + 25px + var(--pbv)))}
.evm-bn__t{margin:0 auto;padding:0 30px 250px;max-width:min(315px,calc(var(--f) * 8.5 + 60px))}
@media(min-width:46em){.evm-bn__t{max-width:100%;width:min(550px,calc(var(--f) * 16.333 + 60px));padding-bottom:100px}}
@media(min-width:61.25em){.evm-bn__t{width:min(615px,calc(var(--f) * 13.875 + 60px));padding-bottom:200px}}
@media(min-width:90em){.evm-bn__t{width:min(830px,calc(var(--f) * 14 + 60px));padding-bottom:15%}}
@media(min-width:100em){.evm-bn__t{width:min(965px,calc(var(--f) * 13.923 + 60px))}}
@media(min-width:120em){.evm-bn__t{width:min(1070px,calc(var(--f) * 13.467 + 60px))}}
@media(min-width:2000px){.evm-bn__t{width:min(1465px,calc(var(--f) * 14.05 + 60px))}}
@media(min-width:137.5em){.evm-bn__t{padding-bottom:14%}}
.evm-bn h1{font-size:var(--f);line-height:1.4;margin:0 0 25px;color:var(--evm-yellow)}
.evm-bn__s{position:absolute;left:0;bottom:35px;z-index:20;width:100%;margin:0;color:var(--evm-yellow);font-weight:400;
  text-transform:uppercase;animation:evm-pulse 3s infinite}
/* phone booking strip under the hero, below 1150 */
.evm-cta-m{background:var(--evm-yellow);text-align:center;padding:25px}
.evm-cta-m a{display:inline-flex;max-width:240px;font-weight:300;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media(min-width:71.875em){.evm-cta-m{display:none}}

/* ---------------------------------------------------------------- numbered offerings on olive */
.evm-usp{position:relative;z-index:20;padding-bottom:100px}
.evm-usp:before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:61px;
  background:url("/examples/elena-vale-modern/assets/ridges/ridge-band-phone.svg") repeat-x bottom center}
@media(min-width:46em){.evm-usp:before{height:137px;background-image:url("/examples/elena-vale-modern/assets/ridges/ridge-band.svg")}}
.evm-usp__w{display:flex;flex-wrap:wrap;flex-direction:column-reverse;padding:50px 0}
@media(min-width:61.25em){.evm-usp__w{flex-direction:row;padding:100px 0}}
@media(min-width:90em){.evm-usp__w{padding:150px 0}}
.evm-usp__m{display:grid;margin-left:calc(100% / 40 * 3);width:calc(100% / 40 * 34)}
@media(min-width:61.25em){.evm-usp__m{width:calc(100% / 40 * 12)}}
@media(min-width:100em){.evm-usp__m{margin-left:calc(100% / 40 * 4)}}
/* the hovered row's photo wipes in over the last one, which stays put underneath until the wipe ends */
.evm-usp__mi{grid-row:1;grid-column:1;position:relative;opacity:0;z-index:1;transition:opacity .4s ease-out}
.evm-usp__mi.is-visible{opacity:1}
.evm-usp__mi.is-top{z-index:2}
.evm-usp__clip{position:relative;overflow:hidden;clip-path:inset(0 100% 0 0);transition:clip-path .6s ease-out}
.evm-usp__mi.is-visible .evm-usp__clip{clip-path:inset(0 0 0 0)}
.evm-usp__clip img{width:100%;aspect-ratio:2/3;object-fit:cover;transform:scale(1.1);transition:transform .5s ease-out}
.evm-usp__mi.is-visible img{transform:scale(1)}
.evm-usp__n{display:none}
@media(min-width:61.25em){.evm-usp__n{display:block;position:absolute;top:0;right:-20px;transform:translate(100%);margin:0;
  font:400 40px/1 var(--evm-serif);letter-spacing:0;transition:opacity .2s linear}}
@media(min-width:100em){.evm-usp__n{right:-35px;font-size:72px}}
.evm-usp__mi:not(.is-top) .evm-usp__n{opacity:0;transition:none}
.evm-usp__items{margin:0 0 50px calc(100% / 40 * 3);width:calc(100% / 40 * 34)}
@media(min-width:61.25em){.evm-usp__items{width:calc(100% / 40 * 16);margin-left:calc(100% / 40 * 6);margin-bottom:0}}
@media(min-width:100em){.evm-usp__items{width:calc(100% / 40 * 10);margin-left:calc(100% / 40 * 10)}}
@media(min-width:137.5em){.evm-usp__items{width:calc(100% / 40 * 8)}}
.evm-usp__item:not(:last-child){margin-bottom:55px}
.evm-usp__it p{margin:0}
.evm-usp__it .evm-usp__fee{margin-top:12px;font-size:14px;font-weight:400;letter-spacing:.01em}
.evm-usp__it .evm-lk{margin-top:30px}
.evm-lk--two{display:flex;flex-wrap:wrap;gap:24px 28px}
@media(min-width:61.25em){
  .evm-usp__it{transition:opacity .3s linear}
  .evm-usp__items:hover .evm-usp__it{opacity:.6}
  .evm-usp__items .evm-usp__it:hover{opacity:1}
}

/* ---------------------------------------------------------------- Hi there: title over the photo pair, text beside */
@media(min-width:61.25em){.evm-hi{padding-bottom:50px}}
.evm-hi__w{display:flex;flex-wrap:wrap}
/* the media column is a size container: 100cqw is its width, which the title, its pale copy and the photos all follow.
   From 980 px the title box (top -15% of the pair's height, 100cqw * (14/17 * 2/3 + 0.12)) overlaps the large photo's
   top, as the reference, and the pale copy inside the photo's frame shows where the two cross. Below 980 the title
   sits just above the large photo, clear of it: there the photo's left edge would run through "there" and split its
   letters into olive and pale pieces (review round 1, ledgered) */
.evm-hi__m{position:relative;container-type:inline-size;width:calc(100% / 40 * 34);margin:0 0 55px calc(100% / 40 * 3);
  --ph:calc(100cqw * (14 / 17 * 2 / 3 + .12))}
@media(min-width:61.25em){.evm-hi__m{width:calc(100% / 40 * 17);margin:0 0 0 calc(100% / 40 * 2)}}
@media(min-width:90em){.evm-hi__m{margin-left:calc(100% / 40 * 3)}}
.evm-hi__t h2{margin:0}
.evm-hi__in{position:relative}
.evm-hi__l{width:calc(100% / 17 * 14);margin-left:auto;padding-bottom:12%}
.evm-hi__f{position:relative;overflow:hidden}
.evm-hi__f img{width:100%;aspect-ratio:3/2;object-fit:cover}
.evm-hi__s{position:absolute;left:0;top:21%;z-index:10;width:calc(100% / 17 * 6)}
.evm-hi__s img{width:100%;aspect-ratio:2/3;object-fit:cover}
.evm-hi__t{position:absolute;z-index:5;left:0;width:100%;bottom:100%}
.evm-hi__t2{display:none;position:absolute;z-index:6;width:100cqw;margin:0;color:var(--evm-yellow);font-family:var(--evm-serif);
  letter-spacing:0;pointer-events:none}
@media(min-width:61.25em){
  .evm-hi__t{bottom:auto;left:auto;right:-5%;top:calc(-.15 * var(--ph));text-align:right}
  .evm-hi__in{margin-bottom:-12%}
  .evm-hi__s{top:26%}
  .evm-hi__t2{display:block;text-align:right;left:calc(100cqw * (.05 - 3 / 17));top:calc(-.15 * var(--ph))}
}
@media(min-width:100em){
  .evm-hi__t{right:-8%;top:calc(-.14 * var(--ph))}
  .evm-hi__t2{left:calc(100cqw * (.08 - 3 / 17));top:calc(-.14 * var(--ph))}
}
@media(min-width:120em){
  .evm-hi__t{right:-10.5%;top:calc(-.13 * var(--ph))}
  .evm-hi__t2{left:calc(100cqw * (.105 - 3 / 17));top:calc(-.13 * var(--ph))}
}
@media(min-width:137.5em){
  .evm-hi__t{right:-8%}
  .evm-hi__t2{left:calc(100cqw * (.08 - 3 / 17))}
}
.evm-hi__c{width:calc(100% / 40 * 34);margin-left:calc(100% / 40 * 3)}
@media(min-width:61.25em){.evm-hi__c{width:calc(100% / 40 * 17);margin-left:calc(100% / 40 * 2);display:flex;flex-direction:column;justify-content:center}}
@media(min-width:90em){.evm-hi__c{width:calc(100% / 40 * 12)}}
.evm-hi__b{margin:20px 0 0}

/* ---------------------------------------------------------------- inner pages: the ceremonies row of links, intro */
/* plain text links above the title from 980 (in the flow to 1439, then laid over the intro's top padding) */
.evm-sn{display:none}
@media(min-width:61.25em){.evm-sn{display:block;padding-top:20px}}
@media(min-width:90em){.evm-sn{position:absolute;z-index:10;left:0;top:20px;width:100%;padding-top:0}}
.evm-sn__in{max-width:2400px;margin:0 auto}
.evm-sn ul{display:flex;flex-wrap:wrap;gap:10px 23px;margin:0 0 0 calc(100% / 40 * 2)}
.evm-sn a{display:inline-block;padding:10px 0;margin:-10px 0;font-weight:300;line-height:24px}
.evm-sn a:hover,.evm-sn a.is-active{color:#000}
.evm-in{display:flex;flex-wrap:wrap;align-items:flex-start;padding-top:20px}
@media(min-width:46em){.evm-in{padding-top:40px}}
@media(min-width:90em){.evm-in{padding-top:68px}}
.evm-in__t{width:calc(100% / 40 * 34);margin-left:calc(100% / 40 * 3)}
@media(min-width:61.25em){.evm-in__t{width:calc(100% / 40 * 18);margin-left:calc(100% / 40 * 2)}}
/* page titles keep the type scale but shrink on short windows so a three line title still sits whole on the first
   screen: --s is the scale's size, --t the title's top (header 149 + the row of links + the intro's top padding) plus a
   12 px margin */
.evm-in__t{--s:40px;--t:181px}
@media(min-width:30em){.evm-in__t{--s:50px}}
@media(min-width:46em){.evm-in__t{--s:60px;--t:201px}}
@media(min-width:61.25em){.evm-in-w--sub .evm-in__t{--t:245px}}
@media(min-width:71.875em){.evm-in__t{--s:70px}}
@media(min-width:90em){.evm-in__t,.evm-in-w--sub .evm-in__t{--s:90px;--t:229px}}
@media(min-width:100em){.evm-in__t{--s:100px}}
@media(min-width:120em){.evm-in__t{--s:110px}}
.evm-in__t .evm-h1{font-size:min(var(--s),max(32px,calc((100svh - var(--t)) / 3.39)))}
.evm-in__c{width:calc(100% / 40 * 34);margin-left:calc(100% / 40 * 3)}
@media(min-width:61.25em){.evm-in__c{width:calc(100% / 40 * 16);margin-left:calc(100% / 40 * 2)}}
@media(min-width:90em){.evm-in__c{width:calc(100% / 40 * 14);margin-left:calc(100% / 40 * 4)}}
@media(min-width:120em){.evm-in__c{width:calc(100% / 40 * 12);margin-left:calc(100% / 40 * 6)}}
/* story and guide titles: from 1440 the title box is 1.5 columns wider (702 px at 1440) so the longest sets in three
   balanced lines with no word left alone; the lead keeps the reference's x (review round 3) */
@media(min-width:90em){.evm-in-w--st .evm-in__t{width:calc(100% / 40 * 19.5)}.evm-in-w--st .evm-in__c{margin-left:calc(100% / 40 * 2.5)}}
@media(min-width:120em){.evm-in-w--st .evm-in__c{margin-left:calc(100% / 40 * 4.5)}}
.evm-in__c .evm-lead strong{font-weight:500}
.evm-tags{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 25px;list-style:none}
.evm-meta{font-size:14px;margin:0 0 25px}
.evm-k-contact .evm-in-w{background:var(--evm-olive);color:var(--evm-yellow)}
/* the ceremonies hub on short windows: where its next title would sit cut by the window's foot, the first screen ends
   at the intro instead (the intro reaches the fold less the next section's top margin: 193 + 150, then 149 + 200) */
@media(min-width:61.25em) and (max-width:89.99em) and (max-height:570px){.evm-in-w--hub{min-height:calc(100svh - 343px)}}
@media(min-width:90em) and (max-width:99.99em) and (max-height:655px){.evm-in-w--hub{min-height:calc(100svh - 349px)}}
@media(min-width:100em) and (max-height:683px){.evm-in-w--hub{min-height:calc(100svh - 349px)}}

/* ---------------------------------------------------------------- text list: title left, serif list right */
.evm-tl{display:flex;flex-wrap:wrap}
.evm-tl__l{width:calc(100% / 40 * 34);margin:0 0 50px calc(100% / 40 * 3)}
@media(min-width:61.25em){.evm-tl__l{width:calc(100% / 40 * 12);margin:0 0 0 calc(100% / 40 * 2)}}
@media(min-width:90em){.evm-tl__l{width:calc(100% / 40 * 10);margin-left:calc(100% / 40 * 4)}}
.evm-tl__r{width:calc(100% / 40 * 34);margin-left:calc(100% / 40 * 3)}
@media(min-width:61.25em){.evm-tl__r{width:calc(100% / 40 * 20);margin-left:calc(100% / 40 * 6)}}
@media(min-width:90em){.evm-tl__r{width:calc(100% / 40 * 18)}}
.evm-tl__list,.evm-plus{list-style:none;font:400 20px/1.5 var(--evm-serif);letter-spacing:0}
@media(min-width:90em){.evm-tl__list,.evm-plus{font-size:30px}}
.evm-tl__list li,.evm-plus li{position:relative;padding-left:1.25em;margin-bottom:5px}
.evm-tl__list li:before,.evm-plus li:before{content:"+";position:absolute;left:0}
.evm-tl__list--plain li{padding-left:0}
.evm-tl__list--plain li:before{content:none}
.evm-tl__list span{font-family:var(--evm-sans);font-size:14px;letter-spacing:-.02em;display:block;line-height:1.5}
.evm-tl__list a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.evm-tl__r>p{margin:30px 0 0}

/* ---------------------------------------------------------------- closing call: two line centred title and a link */
.evm-cta{text-align:center}
.evm-cta__in{padding:0 calc(100% / 40 * 3)}
.evm-cta h2{font-size:40px;line-height:1.4;margin-bottom:15px}
@media(min-width:61.25em){.evm-cta h2{font-size:60px}}
@media(min-width:100em){.evm-cta h2{font-size:80px}}
.evm-cta__b{margin:0}

/* ---------------------------------------------------------------- story cards and the bands that hold them */
/* the degree ring sits level with the digit tops and close to them, as the reference's (Libre Caslon Display draws it
   0.127em above the digits; review round 3) */
.evm-deg{position:relative;top:.125em;margin:0 -.01em}
.evm-card__a{display:block}
.evm-card__m{display:block;position:relative;overflow:hidden}
.evm-card__m img{width:100%;aspect-ratio:2/3;object-fit:cover;transition:transform .6s ease-out}
/* a smooth graduated shade from the photo's top (like a photographer's grad filter, no flat band), only as strong as
   each cover needs: --sh is set per cover from its measured backdrop, 0 where the photo's own top already gives the
   label 3:1; the label also carries a soft glow (review round 3: the old 0.6 shade held flat to a fifth of the card and
   read as a grey veil over the sky) */
.evm-card__m:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(28,30,26,var(--sh,.45)) 0%,rgba(28,30,26,calc(var(--sh,.45) * .92)) 10%,
  rgba(28,30,26,calc(var(--sh,.45) * .72)) 20%,rgba(28,30,26,calc(var(--sh,.45) * .45)) 30%,
  rgba(28,30,26,calc(var(--sh,.45) * .2)) 40%,rgba(28,30,26,calc(var(--sh,.45) * .05)) 50%,rgba(28,30,26,0) 58%)}
.evm-card__a:hover .evm-card__m img{transform:scale(1.05)}
.evm-card__lb{position:absolute;z-index:10;top:15px;right:15px;display:grid;justify-items:end;color:var(--evm-yellow);
  font:400 25px/1.15 var(--evm-serif);letter-spacing:0;text-align:right;pointer-events:none;text-shadow:0 0 16px rgba(0,0,0,.35)}
@media(min-width:90em){.evm-card__lb{font-size:33px}}
.evm-card__co,.evm-card__pl{grid-area:1/1}
.evm-card__co{transition:opacity .3s ease-out}
.evm-card__pl{opacity:0;transition:opacity .5s ease-out}
.evm-card__pl--on,.evm-card__a:hover .evm-card__pl,.evm-card__a:focus-visible .evm-card__pl{opacity:1}
.evm-card__a:hover .evm-card__co,.evm-card__a:focus-visible .evm-card__co{opacity:0}
.evm-card__t{margin:30px 0 10px;line-height:1.4;text-wrap:balance}
.evm-sb{position:relative}
.evm-sb__w{padding:0 calc(100% / 40 * 3)}
@media(min-width:100em){.evm-sb__w{padding:0 calc(100% / 40 * 4)}}
.evm-sb__t{text-align:center;margin:0 0 60px}
@media(min-width:46em){.evm-sb__t{margin-bottom:80px}}
.evm-sb__items{display:flex;flex-wrap:wrap;justify-content:space-between}
.evm-sb__items>.evm-card{width:100%}
.evm-sb__items>.evm-card:not(:last-child){margin-bottom:50px}
@media(min-width:46em){
  .evm-sb__items>.evm-card{width:calc(100% / 32 * 9)}
  .evm-sb__items>.evm-card:not(:last-child){margin-bottom:0}
}
@media(min-width:90em){.evm-sb__items>.evm-card{width:calc(100% / 32 * 8)}}
.evm-sb__b{margin:60px 0 0;text-align:center}
/* pale yellow band: a pale yellow skyline above, a cream one rising at its foot */
.evm-sb--yellow{background:var(--evm-yellow);padding:50px 0 100px;margin-top:125px}
.evm-sb--yellow:before,.evm-sb--yellow:after{content:"";position:absolute;left:0;right:0}
.evm-sb--yellow:before{top:-50px;height:52px;background:url("/examples/elena-vale-modern/assets/ridges/ridge-story-top-phone.svg") repeat-x top center}
.evm-sb--yellow:after{bottom:0;height:56px;background:url("/examples/elena-vale-modern/assets/ridges/ridge-story-foot-phone.svg") repeat-x bottom center}
@media(min-width:46em){
  .evm-sb--yellow{padding:115px 0 140px;margin-top:200px}
  .evm-sb--yellow:before{top:-115px;height:117px;background-image:url("/examples/elena-vale-modern/assets/ridges/ridge-story-top.svg")}
  .evm-sb--yellow:after{height:124px;background-image:url("/examples/elena-vale-modern/assets/ridges/ridge-story-foot.svg")}
}
@media(min-width:90em){.evm-sb--yellow{margin-top:250px}}
.evm-sb--yellow .evm-sb__w{position:relative;z-index:1}
/* cream band under the thin ridge line */
.evm-sb--line{padding-top:130px}
.evm-sb--line:before{content:"";position:absolute;left:0;right:0;top:0;height:47px;
  background:url("/examples/elena-vale-modern/assets/ridges/ridge-line-phone.svg") repeat-x top center/auto 47px}
@media(min-width:46em){
  .evm-sb--line{padding-top:245px}
  .evm-sb--line:before{height:179px;background:url("/examples/elena-vale-modern/assets/ridges/ridge-line.svg") repeat-x top center}
}
/* olive "Read more stories" band with olive ridge edges */
.evm-sb--olive{--mt:80px;--mb:80px;padding:30px 0 calc(var(--mb) + 40px);margin-top:calc(var(--mt) + 75px)}
@media(min-width:46em){.evm-sb--olive{--mt:288px;--mb:164px;padding-top:0}}
@media(min-width:61.25em){.evm-sb--olive{margin-top:calc(var(--mt) + 150px)}}
@media(min-width:90em){.evm-sb--olive{margin-top:calc(var(--mt) + 200px)}}
.evm-sb--olive:before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--mt));height:var(--mt);
  background:url("/examples/elena-vale-modern/assets/ridges/ridge-olive-top-phone.svg") repeat-x top center}
.evm-sb--olive:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--mb);
  background:url("/examples/elena-vale-modern/assets/ridges/ridge-olive-foot-phone.svg") repeat-x bottom center}
@media(min-width:46em){
  .evm-sb--olive:before{background-image:url("/examples/elena-vale-modern/assets/ridges/ridge-olive-top.svg")}
  .evm-sb--olive:after{background-image:url("/examples/elena-vale-modern/assets/ridges/ridge-olive-foot.svg")}
}
.evm-sb--olive .evm-c{z-index:1}
/* the calling card: a black cat on the ridge's main peak (tile x 1212 of 3000; phone 634.5 of 1347), seat 64% down */
.evm-cat{position:absolute;z-index:2;width:30px;height:auto;left:calc(50% - 39px - 15px);top:calc(-80px + 1.7px - 58px * .64);
  pointer-events:none}
@media(min-width:46em){.evm-cat{width:44px;left:calc(50% - 288px - 22px);top:calc(-288px + 4px - 85.2px * .64)}}

/* ---------------------------------------------------------------- home: upcoming travels (dashed paths between stops) */
.evm-tr{text-align:center}
.evm-tr__title{margin-bottom:65px}
@media(min-width:61.25em){.evm-tr__title{margin-bottom:95px}}
@media(min-width:90em){.evm-tr__title{margin-bottom:125px}}
.evm-tr__title h2{margin:0}
.evm-tr__items{margin:0}
.evm-tr__stop{display:flex;flex-wrap:wrap;align-items:center;transition:opacity .5s ease-out}
.evm-motion .evm-tr__stop:not(.is-on){opacity:.3}
.evm-tr__c{width:100%;padding:0 calc(100% / 40 * 3)}
.evm-tr__co{margin:0;font:400 30px/1.4 var(--evm-serif);letter-spacing:0}
@media(min-width:90em){.evm-tr__co{font-size:40px}}
@media(min-width:100em){.evm-tr__co{font-size:50px}}
.evm-tr__pl{margin:0;font-size:24px}
@media(min-width:100em){.evm-tr__pl{font-size:30px}}
.evm-tr__d{margin:5px 0 0;line-height:1.4}
@media(min-width:71.875em){.evm-tr__d{font-size:20px}}
.evm-tr__m{width:calc(100% / 40 * 24);margin:40px 0 40px calc(100% / 40 * 8)}
@media(min-width:30em){.evm-tr__m{width:calc(100% / 40 * 16);margin-left:calc(100% / 40 * 12)}}
.evm-tr__m img{width:100%;aspect-ratio:3/2;object-fit:cover}
.evm-tr__p{display:none}
@media(min-width:61.25em){
  .evm-tr__c{width:calc(100% / 40 * 12);padding:0}
  .evm-tr__m{width:calc(100% / 40 * 10);margin:0}
  .evm-tr__it--r2 .evm-tr__stop,.evm-tr__it--l2 .evm-tr__stop{flex-direction:row-reverse;justify-content:flex-end}
  .evm-tr__it--r2 .evm-tr__c,.evm-tr__it--r2 .evm-tr__m,.evm-tr__it--l2 .evm-tr__c,.evm-tr__it--l2 .evm-tr__m,
  .evm-tr__it--r .evm-tr__c{margin-left:calc(100% / 40 * 6)}
  .evm-tr__it--r .evm-tr__m,.evm-tr__it--l .evm-tr__m{margin-left:calc(100% / 40 * 4)}
  .evm-tr__it--l .evm-tr__c{margin-left:calc(100% / 40 * 10)}
  .evm-tr__p{display:block;margin:-2% 0}
  .evm-tr__it--l .evm-tr__p{margin:-2% 0 0}
  .evm-tr__p svg{display:inline-block;vertical-align:top;position:relative;height:auto;overflow:visible}
  .evm-tr__it--r2 svg{width:42%;margin-left:-3%}
  .evm-tr__it--r svg{width:40%}
  .evm-tr__it--l2 svg{width:32%;margin-left:7.5%}
  .evm-tr__it--l svg{width:10.5%;margin-left:-9.5%}
}
.evm-tr__ph,.evm-tr__dash{fill:none;stroke:var(--evm-olive);stroke-width:1;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}
.evm-tr__ph{opacity:.2}
.evm-tr__mk{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round}
.evm-tr__tx{max-width:635px;padding:0 30px;margin:20px auto 0;font:400 24px/1.4 var(--evm-serif);letter-spacing:0;text-wrap:balance;transition:opacity .5s ease-out}
@media(min-width:100em){.evm-tr__tx{font-size:30px}}
.evm-motion .evm-tr__tx:not(.is-on){opacity:.3}

/* ---------------------------------------------------------------- home: current location marquee and credentials */
.evm-lg{overflow:hidden}
.evm-mq{position:relative;width:100%;overflow:hidden;margin-bottom:50px;text-align:center}
@media(min-width:90em){.evm-mq{margin-bottom:130px}}
.evm-mq--about{margin-bottom:0}
.evm-mq__items{display:block}
.evm-mq__g{display:inline}
.evm-mq__t{margin:0;font:400 30px/1.4 var(--evm-serif);letter-spacing:0}
@media(min-width:90em){.evm-mq__t{font-size:70px}}
@media(min-width:120em){.evm-mq__t{font-size:90px}}
.evm-mq__t:not(:last-child):after,.evm-motion .evm-mq__t:after{content:"\a0·\a0"}
/* with motion the line runs on one row and slides (site.js); without it the whole line wraps and stays */
.evm-motion .evm-mq__items,.evm-motion .evm-mq__g,.evm-motion .evm-mq__t{display:inline-flex;flex-wrap:nowrap;white-space:nowrap;align-items:center}
.evm-motion .evm-mq{text-align:left}
.evm-motion .evm-mq__items{will-change:transform}
.evm-lg__tx{width:calc(100% / 40 * 34);margin:0 auto;text-align:center}
@media(min-width:46em){.evm-lg__tx{width:calc(100% / 40 * 16)}}
/* three short kind words where the reference's badge row sits (review round 3), then a link to all of them */
.evm-lg__kw{list-style:none;display:grid;gap:35px;width:calc(100% / 40 * 34);margin:50px auto 0;padding:0;text-align:center}
@media(min-width:46em){.evm-lg__kw{width:calc(100% / 40 * 20)}}
@media(min-width:61.25em){.evm-lg__kw{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:calc(100% / 22 * 1.5);width:calc(100% / 40 * 24)}}
@media(min-width:90em){.evm-lg__kw{width:calc(100% / 40 * 22);margin-top:70px}}
.evm-lg__k{margin:0}
.evm-lg__k blockquote{margin:0;font:400 20px/1.35 var(--evm-serif);letter-spacing:0;text-wrap:balance}
@media(min-width:90em){.evm-lg__k blockquote{font-size:22px}}
.evm-lg__k blockquote p{margin:0}
.evm-lg__k blockquote p:before{content:"\201c"}
.evm-lg__k blockquote p:after{content:"\201d"}
.evm-lg__k figcaption{margin-top:12px;font-size:15px;line-height:1.4}
.evm-lg__k figcaption span{display:block;font-size:14px}
.evm-lg__mo{margin:40px 0 0;text-align:center}

/* ---------------------------------------------------------------- home: next steps under a full bleed photo */
.evm-st__m{position:relative;height:500px;overflow:hidden}
@media(min-width:61.25em){.evm-st__m{height:825px}}
@media(min-width:137.5em){.evm-st__m{height:1000px}}
.evm-st__m:before{content:"";position:absolute;z-index:10;left:0;right:0;top:0;height:29px;
  background:url("/examples/elena-vale-modern/assets/ridges/ridge-photo-top-phone.svg") repeat-x top center}
@media(min-width:46em){.evm-st__m:before{height:66px;background-image:url("/examples/elena-vale-modern/assets/ridges/ridge-photo-top.svg")}}
.evm-st__m picture,.evm-st__m img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:bottom center}
/* phones narrower than the crop (under 390): keep its right edge, so the couple moves left and clears the title */
@media(max-width:599px){.evm-st__m img{object-position:right bottom}}
.evm-st__mc{position:absolute;left:0;bottom:0;width:100%;z-index:5}
.evm-st__t{width:100%;padding-right:calc(100% / 40 * 3);color:var(--evm-yellow);text-align:right}
.evm-st__t h2{margin:0 0 35px}
@media(min-width:61.25em){
  .evm-st__t{width:auto;margin-left:calc(100% / 40 * 24);padding-right:0;text-align:left}
  .evm-st__t h2{margin-bottom:55px}
}
.evm-st__items{counter-reset:evm-step;margin:0}
.evm-st__i{border-bottom:1px solid var(--evm-olive)}
.evm-st__w{padding:25px 0}
@media(min-width:61.25em){.evm-st__w{display:flex}}
.evm-st__ti{margin:0 calc(100% / 40 * 3) 20px}
@media(min-width:61.25em){.evm-st__ti{width:calc(100% / 40 * 24);margin:0;padding-left:20px}}
.evm-st__h{display:flex;margin:0;font-size:24px;line-height:1.4}
@media(min-width:61.25em){.evm-st__h{font-size:30px}}
@media(min-width:71.875em){.evm-st__h{font-size:40px}}
@media(min-width:100em){.evm-st__h{font-size:50px}}
.evm-st__h:before{counter-increment:evm-step;content:counter(evm-step) ".";flex:none;padding-right:5px}
@media(min-width:71.875em){.evm-st__h:before{min-width:40px}}
@media(min-width:100em){.evm-st__h:before{min-width:45px}}
.evm-st__tx{margin:0 calc(100% / 40 * 3)}
@media(min-width:61.25em){.evm-st__tx{width:calc(100% / 40 * 14);margin:0}}

/* ---------------------------------------------------------------- offering pages: scattered gallery over the ridge line */
.evm-gl__w{display:flex;flex-wrap:wrap;align-items:flex-start;z-index:0}
.evm-gl__i{width:calc(100% / 40 * 34);margin:0 0 50px calc(100% / 40 * 3)}
.evm-gl__i img{width:100%}
/* review round 2: a page's own phone order for its stack (build.py PHONE_ORDER); the desktop scatter keeps page order */
.evm-gl__i--o1{order:1}.evm-gl__i--o2{order:2}.evm-gl__i--o3{order:3}.evm-gl__i--o4{order:4}.evm-gl__i--o5{order:5}
.evm-gl__i--o6{order:6}
@media(min-width:61.25em){
  .evm-gl__w>.evm-gl__i{order:0}
  .evm-gl__i{margin-bottom:0}
  .evm-gl__i:nth-child(6n+1){width:calc(100% / 40 * 10);margin-left:calc(100% / 40 * 2);padding-bottom:9.6875%}
  .evm-gl__i:nth-child(6n+1):not(:first-child){padding-top:8.9%}
  .evm-gl__i:nth-child(6n+2){width:calc(100% / 40 * 6);margin-left:calc(100% / 40 * 20);padding-top:3.229%}
  .evm-gl__i:nth-child(6n+3){width:calc(100% / 40 * 4);margin-left:calc(100% / 40 * 6)}
  .evm-gl__i:nth-child(6n+3):before{content:"";position:absolute;z-index:-1;left:0;width:100%;height:456px;transform:translateY(-50%);
    background:url("/examples/elena-vale-modern/assets/ridges/ridge-line-gallery.svg") repeat-x center center}
  .evm-gl__i:nth-child(6n+4){width:calc(100% / 40 * 6);margin-left:calc(100% / 40 * 10);margin-top:-11%}
  .evm-gl__i:nth-child(6n+5){width:calc(100% / 40 * 12);margin-left:calc(100% / 40 * 10);padding-top:10.833%}
  .evm-gl__i:nth-child(6n){width:calc(100% / 40 * 6);margin-left:calc(100% / 40 * 6);padding-top:4.5313%}
}

/* ---------------------------------------------------------------- offering pages: olive band with big coordinates */
.evm-ob2{position:relative;padding:75px 0}
@media(min-width:61.25em){.evm-ob2{padding:150px 0}}
@media(min-width:90em){.evm-ob2{padding:200px 0}}
.evm-ob2:before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:61px;
  background:url("/examples/elena-vale-modern/assets/ridges/ridge-band-phone.svg") repeat-x bottom center}
@media(min-width:61.25em){.evm-ob2:before{height:137px;background-image:url("/examples/elena-vale-modern/assets/ridges/ridge-band.svg")}}
.evm-ob2__w{display:flex;flex-wrap:wrap;z-index:1}
.evm-ob2__l{width:calc(100% / 40 * 34);margin:0 0 50px calc(100% / 40 * 3)}
.evm-ob2__r{width:calc(100% / 40 * 34);margin-left:calc(100% / 40 * 3)}
.evm-ob2__co{width:calc(100% / 40 * 34);margin:50px 0 0 calc(100% / 40 * 3);font:400 30px/1.4 var(--evm-serif);letter-spacing:0}
@media(min-width:61.25em){
  .evm-ob2__l{width:calc(100% / 40 * 14);margin:0 0 0 calc(100% / 40 * 2)}
  .evm-ob2__r{width:calc(100% / 40 * 14);margin-left:calc(100% / 40 * 8)}
  .evm-ob2__co{width:calc(100% / 40 * 36);margin:30px 0 0 calc(100% / 40 * 2);font-size:65px}
}
@media(min-width:90em){
  .evm-ob2__l{width:calc(100% / 40 * 12);margin-left:calc(100% / 40 * 4)}
  .evm-ob2__r{width:calc(100% / 40 * 10);margin-left:calc(100% / 40 * 10)}
  .evm-ob2__co{width:calc(100% / 40 * 32);margin-left:calc(100% / 40 * 4);font-size:80px}
}
@media(min-width:120em){.evm-ob2__co{font-size:95px}}
.evm-ob2__l .evm-h2{margin-bottom:15px}

/* ---------------------------------------------------------------- offering pages: what's included */
.evm-in2__w{display:flex;flex-direction:column}
.evm-in2__w>*{width:calc(100% / 40 * 34);margin-left:calc(100% / 40 * 3)}
.evm-in2__t{order:1}
.evm-in2__l{order:2}
.evm-in2__m{order:3;padding-top:50px}
.evm-in2__c{order:4;margin-top:50px;margin-bottom:0}
.evm-in2__m img{width:100%}
.evm-in2__t .evm-h2{margin:0 0 50px}
.evm-fee{margin:25px 0 0;font-weight:400}
@media(min-width:61.25em){
  .evm-in2__w{display:grid;grid-template-rows:auto 1fr auto;
    grid-template-columns:calc(100% / 40 * 2) calc(100% / 40 * 12) calc(100% / 40 * 6) calc(100% / 40 * 20) 1fr;
    grid-template-areas:". t . l ." ". m . l ." ". m . c ."}
  .evm-in2__w>*{width:auto;margin-left:0}
  .evm-in2__t{grid-area:t}
  .evm-in2__t .evm-h2{margin-bottom:15px}
  .evm-in2__l{grid-area:l}
  .evm-in2__m{grid-area:m;align-self:end}
  .evm-in2__c{grid-area:c}
}
@media(min-width:90em){
  .evm-in2__w{grid-template-columns:calc(100% / 40 * 4) calc(100% / 40 * 10) calc(100% / 40 * 6) calc(100% / 40 * 18) 1fr}
}

/* ---------------------------------------------------------------- quote set large with small photos between the words */
.evm-cp__w{width:calc(100% / 40 * 34);margin:0 auto;text-align:center}
@media(min-width:46em){.evm-cp__w{width:600px}}
@media(min-width:61.25em){.evm-cp__w{width:800px}}
@media(min-width:100em){.evm-cp__w{width:1152px}}
.evm-cp__t{margin:0;font:400 30px/1.4 var(--evm-serif);letter-spacing:0;text-wrap:balance}
@media(min-width:90em){.evm-cp__t{font-size:40px}}
@media(min-width:100em){.evm-cp__t{font-size:60px}}
.evm-cp__p{display:inline-block;vertical-align:middle}
.evm-cp__p img{width:auto;height:40px}
@media(min-width:61.25em){.evm-cp__p img{height:49px}}

/* ---------------------------------------------------------------- testimonial: couple's photo left, their words right */
.evm-qt__w{display:flex;flex-wrap:wrap;align-items:center}
.evm-qt__m{width:calc(100% / 40 * 34);margin:0 0 25px calc(100% / 40 * 3)}
.evm-qt__m img{width:100%;aspect-ratio:3/2;object-fit:cover}
.evm-qt__m--none{display:none}
.evm-qt__c{width:calc(100% / 40 * 34);margin-left:calc(100% / 40 * 3)}
@media(min-width:61.25em){
  .evm-qt__m{width:calc(100% / 40 * 10);margin:0 0 0 calc(100% / 40 * 4)}
  .evm-qt__m--none{display:block}
  .evm-qt__c{width:calc(100% / 40 * 18);margin-left:calc(100% / 40 * 4)}
}
@media(min-width:90em){
  .evm-qt__m{margin-left:calc(100% / 40 * 6)}
  .evm-qt__c{width:calc(100% / 40 * 14)}
}
.evm-qt blockquote,.evm-kw blockquote{margin:0;font:400 20px/1.4 var(--evm-serif);letter-spacing:0}
@media(min-width:90em){.evm-qt blockquote,.evm-kw blockquote{font-size:24px}}
@media(min-width:100em){.evm-qt blockquote,.evm-kw blockquote{font-size:30px}}
.evm-qt blockquote:before,.evm-kw blockquote:before{content:"\201c";margin-left:-.3em}
.evm-qt blockquote:after,.evm-kw blockquote:after{content:"\201d";margin-left:1px}
.evm-qt blockquote p,.evm-kw blockquote p{display:inline;margin:0}
.evm-qt__n{margin-top:15px}
.evm-qt__n span{display:block;font-size:14px}
.evm-kw__row+.evm-kw__row{margin-top:50px}
@media(min-width:61.25em){.evm-kw__row+.evm-kw__row{margin-top:100px}}
@media(min-width:90em){.evm-kw__row+.evm-kw__row{margin-top:133px}}

/* ---------------------------------------------------------------- FAQs: an open list between hairlines */
.evm-fq__w{display:flex;flex-wrap:wrap}
.evm-fq__l{width:calc(100% / 40 * 34);margin:0 0 50px calc(100% / 40 * 3)}
.evm-fq__r{width:calc(100% / 40 * 34);margin-left:calc(100% / 40 * 3)}
@media(min-width:61.25em){
  .evm-fq__l{width:calc(100% / 40 * 10);margin:0 0 0 calc(100% / 40 * 2)}
  .evm-fq__r{width:calc(100% / 40 * 22);margin-left:calc(100% / 40 * 4)}
}
.evm-fq__i{border-bottom:1px solid var(--evm-olive);padding:20px 0}
.evm-fq__i:first-child{border-top:1px solid var(--evm-olive)}
@media(min-width:46em){.evm-fq__i{padding:40px 0}}
.evm-fq__q{margin:0;font-size:20px;line-height:1.4}
@media(min-width:46em){.evm-fq__q{font-size:28px}}
.evm-fq__b{display:flex;justify-content:space-between;align-items:flex-start;width:100%;margin:0;padding:0;border:0;background:none;
  color:inherit;font:inherit;line-height:inherit;letter-spacing:0;text-align:left;cursor:pointer}
.evm-fq__b>span:first-child{width:82%}
.evm-fq__ic{--sz:20px;position:relative;flex:none;width:var(--sz);height:var(--sz);margin-top:7px}
@media(min-width:46em){.evm-fq__ic{--sz:30px}}
.evm-fq__ic:before,.evm-fq__ic:after{content:"";position:absolute;top:50%;left:50%;width:100%;height:1px;background:currentColor;
  transform:translate(-50%,-50%);transition:opacity .1s linear}
.evm-fq__ic:after{transform:translate(-50%,-50%) rotate(90deg)}
.evm-fq__a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s ease}
.evm-fq__ai{overflow:hidden;width:82%;min-height:0}
.evm-fq__ai p{margin:25px 0 0}
/* with the script the answers start closed and open on their button (with JavaScript off every answer shows) */
.evm-js:not(.evm-nojs) .evm-fq__i:not(.is-open) .evm-fq__a{grid-template-rows:0fr}
.evm-js:not(.evm-nojs) .evm-fq__i:not(.is-open) .evm-fq__ai{visibility:hidden;transition:visibility 0s linear .3s}
.evm-js:not(.evm-nojs) .evm-fq__i:not(.is-open) .evm-fq__ic:after{opacity:1}
.evm-fq__i.is-open .evm-fq__ic:after,html:not(.evm-js) .evm-fq__ic:after,.evm-nojs .evm-fq__ic:after{opacity:0}
.evm-fq.is-still .evm-fq__a,.evm-fq.is-still .evm-fq__ai{transition:none}

/* ---------------------------------------------------------------- ceremonies: promise text, scattered photos, lettering */
.evm-t3{position:relative}
.evm-t3__w{display:flex;flex-wrap:wrap;align-items:flex-start;padding-bottom:7%}
.evm-t3__c{width:calc(100% / 40 * 34);margin:0 0 55px calc(100% / 40 * 3)}
.evm-t3__m1{width:calc(100% / 40 * 22);margin-left:calc(100% / 40 * 15)}
.evm-t3__nm{width:100%}
.evm-t3__nmv{width:80%;margin:0 auto;font:400 22vw/1 var(--evm-serif);letter-spacing:-.02em;text-align:center;white-space:nowrap;
  color:var(--evm-olive)}
.evm-t3__m2{width:calc(100% / 40 * 22);margin:0 0 40px calc(100% / 40 * 3)}
.evm-t3__m3{width:calc(100% / 40 * 22);margin-left:calc(100% / 40 * 15)}
.evm-t3 img{width:100%}
@media(min-width:46em){
  .evm-t3__m2:before{content:"";position:absolute;left:0;width:100%;height:513px;
    background:url("/examples/elena-vale-modern/assets/ridges/ridge-line-tall.svg") repeat-x top center}
}
@media(min-width:61.25em){
  .evm-t3__c{width:calc(100% / 40 * 16);margin:0 0 0 calc(100% / 40 * 4)}
  .evm-t3__m1{width:calc(100% / 40 * 14);margin-left:calc(100% / 40 * 20)}
  .evm-t3__m2{width:calc(100% / 40 * 12);margin:0 0 0 calc(100% / 40 * 2);padding-top:1%}
  .evm-t3__m3{width:calc(100% / 40 * 10);margin-left:calc(100% / 40 * 6);padding-top:16.927%}
}
@media(min-width:71.875em){
  .evm-t3__c{width:calc(100% / 40 * 14);padding-bottom:12%}
  .evm-t3__m1{margin-left:calc(100% / 40 * 6);padding-top:8%;padding-bottom:8.375%}
  /* the name holds at mid window as the reference's lettering does, but lets go just before the third photo reaches
     its letters, so the live text name never reads half cut (review round 2, verified flaw). The range box (--nmh, no
     height in the flow) runs from the name's middle to 16 px above the point where the third photo's top would meet
     the name's baseline: the third photo starts 16.927% of the row below the name's line, and the name's ink ends
     0.36em under its middle (its font is min(10.8vw, 259px); measured, work/fixlayout-r2/baseline.mjs). The row is the
     window's width up to 2400 px. The photos' own drift then keeps the ink 20 px or more clear (hubname.json) */
  .evm-t3__nm{--nmh:max(0px,calc(min(100vw,2400px) * .16927 - min(3.9vw,93.2px) - 16px));height:var(--nmh);
    margin-bottom:calc(-1 * var(--nmh))}
  .evm-t3__nmi{position:sticky;top:50vh;height:0}
  /* the name starts just right of the second photo's edge (35% of the row), so that photo never hides its "n" as it
     scrolls past (review round 1) */
  .evm-t3__nmv{position:absolute;top:-.5em;left:36.25%;width:40%;margin:0;text-align:left;font-size:min(10.8vw,259px)}
}
@media(min-width:100em){
  .evm-t3__c{width:calc(100% / 40 * 12)}
  .evm-t3__c .evm-h2{margin-right:-24px}
  .evm-t3__m1{margin-left:calc(100% / 40 * 8);padding-top:3.125%}
}

/* ---------------------------------------------------------------- ceremonies: the four ceremonies on olive */
.evm-cols{--mt:80px;--mb:80px;position:relative;padding:30px 0 calc(var(--mb) + 40px);margin-top:calc(var(--mt) + 75px)}
@media(min-width:46em){.evm-cols{--mt:109px;--mb:152px;padding:140px 0 calc(var(--mb) + 140px)}}
@media(min-width:61.25em){.evm-cols{margin-top:calc(var(--mt) + 150px)}}
@media(min-width:120em){.evm-cols{padding-top:200px}}
.evm-cols:before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--mt));height:var(--mt);
  background:url("/examples/elena-vale-modern/assets/ridges/ridge-olive-top-phone.svg") repeat-x top center}
.evm-cols:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--mb);
  background:url("/examples/elena-vale-modern/assets/ridges/ridge-olive-foot-phone.svg") repeat-x bottom center}
@media(min-width:46em){
  .evm-cols:before{background-image:url("/examples/elena-vale-modern/assets/ridges/ridge-hub-top.svg")}
  .evm-cols:after{background-image:url("/examples/elena-vale-modern/assets/ridges/ridge-hub-foot.svg")}
}
.evm-cols__w{display:flex;flex-wrap:wrap;align-items:flex-start;z-index:1}
.evm-cols__t{width:calc(100% / 40 * 34);margin:0 0 30px calc(100% / 40 * 3)}
.evm-cols__c{width:calc(100% / 40 * 34);margin-left:calc(100% / 40 * 3)}
@media(min-width:90em){
  .evm-cols__t{width:calc(100% / 40 * 8);margin-left:calc(100% / 40 * 2)}
  .evm-cols__c{width:calc(100% / 40 * 27);margin-left:0}
}
.evm-cols__items{display:flex;flex-wrap:wrap;gap:50px calc(100% / 27 * 3)}
.evm-col{width:100%}
@media(min-width:30em){.evm-col{width:calc(100% / 27 * 12)}}
@media(min-width:61.25em){.evm-cols__items{column-gap:calc(100% / 27)}.evm-col{width:calc(100% / 27 * 6)}}
.evm-col__a{display:block}
.evm-col__m{display:block;overflow:hidden;margin-bottom:30px}
.evm-col__m img{width:100%;aspect-ratio:2/3;object-fit:cover;transition:transform .6s ease-out}
.evm-col:hover .evm-col__m img{transform:scale(1.05)}
.evm-col__t{margin:0 0 10px}
.evm-col p{margin:0}
.evm-col__fee{margin-top:10px!important;font-size:14px;font-weight:400;letter-spacing:.01em}
.evm-col__fee span{display:block;font-weight:300}
.evm-col__l{margin-top:20px!important}
/* just the legal bit: one note under the four cards, on a hairline as the FAQ rows */
.evm-cols__x{margin:50px 0 0;padding-top:25px;border-top:1px solid var(--evm-yellow)}
.evm-cols__x strong{font-weight:500}
@media(min-width:61.25em){.evm-cols__x{margin-top:70px}}

/* ---------------------------------------------------------------- photo pair beside a title and text (about, contact) */
@media(min-width:61.25em){.evm-tm{padding-bottom:50px}}
.evm-tm__w{display:flex;flex-wrap:wrap}
.evm-tm__m{width:calc(100% / 40 * 34);margin:0 0 55px calc(100% / 40 * 3)}
.evm-tm__in{position:relative}
.evm-tm__l{width:calc(100% / 17 * 14);margin-left:auto;padding-bottom:12%}
.evm-tm__l img{width:100%;aspect-ratio:3/2;object-fit:cover}
.evm-tm__s{position:absolute;left:0;top:21%;z-index:10;width:calc(100% / 17 * 6)}
.evm-tm__s img{width:100%;aspect-ratio:2/3;object-fit:cover}
.evm-tm__c{width:calc(100% / 40 * 34);margin-left:calc(100% / 40 * 3)}
.evm-tm__b{margin:20px 0 0}
.evm-tm__co{display:none}
@media(min-width:61.25em){
  .evm-tm__m{width:calc(100% / 40 * 17);margin:0 0 0 calc(100% / 40 * 2)}
  .evm-tm__l{margin-bottom:-12%}
  .evm-tm__s{top:26%}
  .evm-tm__c{width:calc(100% / 40 * 17);margin-left:calc(100% / 40 * 2);display:flex;flex-direction:column;justify-content:center}
  .evm-tm--r .evm-tm__w{flex-direction:row-reverse;justify-content:flex-end}
}
@media(min-width:90em){
  .evm-tm__m{margin-left:calc(100% / 40 * 3)}
  .evm-tm__c{width:calc(100% / 40 * 12)}
  .evm-tm--r .evm-tm__m,.evm-tm--r .evm-tm__c{margin-left:calc(100% / 40 * 4)}
  .evm-tm__co{display:block;position:absolute;z-index:30;bottom:0;right:calc(100% + 24px);margin:0;text-align:right;white-space:nowrap;
    font:400 30px/1.13 var(--evm-serif);letter-spacing:0}
}
@media(min-width:120em){.evm-tm__co{font-size:43px}}
/* contact: the travel note on pale yellow, a cream skyline rising at its foot */
.evm-tm--yellow{position:relative;background:var(--evm-yellow);padding:75px 0}
@media(min-width:61.25em){.evm-tm--yellow{padding:150px 0}}
@media(min-width:90em){.evm-tm--yellow{padding:200px 0}}
.evm-fm+.evm-tm--yellow{margin-top:0}
.evm-tm--yellow .evm-tm__w{margin-bottom:61px}
@media(min-width:61.25em){.evm-tm--yellow .evm-tm__w{margin-bottom:150px}}
.evm-tm--yellow:before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:61px;
  background:url("/examples/elena-vale-modern/assets/ridges/ridge-band-phone.svg") repeat-x bottom center}
@media(min-width:61.25em){.evm-tm--yellow:before{height:137px;background-image:url("/examples/elena-vale-modern/assets/ridges/ridge-band.svg")}}

/* ---------------------------------------------------------------- about: lettering sinking into the olive band */
.evm-abw{overflow:hidden;overflow:clip}
.evm-ab__nm{position:relative;z-index:20;margin:0 -1% calc(-.15em - 4.2vw);font:400 min(26.6vw,638px)/1 var(--evm-serif);letter-spacing:-.02em;
  text-align:center;white-space:nowrap;color:var(--evm-olive);pointer-events:none}
.evm-ab{position:relative;padding:100px 0}
@media(min-width:46em){.evm-ab{padding:180px 0 190px}}
.evm-ab:before{content:"";position:absolute;left:0;right:0;top:0;height:50px;
  background:url("/examples/elena-vale-modern/assets/ridges/ridge-about-top-phone.svg") repeat-x top center}
.evm-ab:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:61px;
  background:url("/examples/elena-vale-modern/assets/ridges/ridge-band-phone.svg") repeat-x bottom center}
@media(min-width:61.25em){
  .evm-ab:before{height:86px;background-image:url("/examples/elena-vale-modern/assets/ridges/ridge-about-top.svg")}
  .evm-ab:after{height:137px;background-image:url("/examples/elena-vale-modern/assets/ridges/ridge-band.svg")}
}
.evm-ab__w{display:flex;flex-wrap:wrap;z-index:1}
.evm-ab__m{width:calc(100% / 40 * 34);margin:0 0 55px calc(100% / 40 * 3)}
.evm-ab__m img{width:100%;aspect-ratio:3/2;object-fit:cover}
.evm-ab__c{width:calc(100% / 40 * 34);margin-left:calc(100% / 40 * 3)}
@media(min-width:61.25em){
  .evm-ab__w{flex-direction:row-reverse;justify-content:flex-end}
  .evm-ab__m{width:calc(100% / 40 * 14);margin:0 0 0 calc(100% / 40 * 2)}
  .evm-ab__c{width:calc(100% / 40 * 17);margin-left:calc(100% / 40 * 2);display:flex;flex-direction:column;justify-content:center}
}
@media(min-width:90em){.evm-ab__c{width:calc(100% / 40 * 12);margin-left:calc(100% / 40 * 6)}}

/* ---------------------------------------------------------------- long text in the right column, ridge line behind */
.evm-lt{position:relative;z-index:0;padding-top:80px}
.evm-lt:before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:47px;
  background:url("/examples/elena-vale-modern/assets/ridges/ridge-line-phone.svg") repeat-x top center/contain}
@media(min-width:61.25em){.evm-lt:before{top:-120px;height:378px;background:url("/examples/elena-vale-modern/assets/ridges/ridge-line-text.svg") repeat-x top center}}
.evm-lt__c{width:calc(100% / 40 * 34);margin-left:calc(100% / 40 * 3)}
@media(min-width:61.25em){.evm-lt__c{width:calc(100% / 40 * 16);margin-left:calc(100% / 40 * 20)}}
@media(min-width:90em){.evm-lt__c{width:calc(100% / 40 * 14);margin-left:calc(100% / 40 * 22)}}
@media(min-width:120em){.evm-lt__c{width:calc(100% / 40 * 12);margin-left:calc(100% / 40 * 24)}}
.evm-mq--about{margin-top:75px}
@media(min-width:61.25em){.evm-mq--about{margin-top:150px}}
@media(min-width:90em){.evm-mq--about{margin-top:200px}}

/* ---------------------------------------------------------------- about: where I sit on the scale (fading slides) */
.evm-sl{position:relative;background:var(--evm-yellow);text-align:center}
.evm-sl__t{position:absolute;z-index:30;top:70px;right:0;width:100%;margin:0;padding:0 calc(100% / 40 * 3)}
@media(min-width:61.25em){.evm-sl__t{top:85px;width:50%}}
.evm-sl__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0}
.evm-sl__s{flex:0 0 100%;display:flex;scroll-snap-align:start;background:var(--evm-yellow)}
.evm-sl__m{display:none}
.evm-sl__p{width:100%;display:flex;align-items:center;justify-content:center;padding:250px 0 200px}
.evm-sl__tx{width:80%}
@media(min-width:46em){.evm-sl__tx{width:60%}}
@media(min-width:61.25em){
  .evm-sl__m{display:block;position:relative;width:50%}
  .evm-sl__m picture,.evm-sl__m img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
  .evm-sl__p{width:50%;padding:300px 0 250px}
}
@media(min-width:90em){.evm-sl__p{min-height:100vh}}
.evm-sl__n,.evm-sl__a{margin:0;font:400 24px/1.4 var(--evm-serif);letter-spacing:0}
@media(min-width:61.25em){.evm-sl__n,.evm-sl__a{font-size:30px}}
@media(min-width:90em){.evm-sl__n,.evm-sl__a{font-size:40px}}
.evm-sl__n{margin-bottom:45px}
.evm-sl__q{margin:0 0 10px}
.evm-sl__btn,.evm-sl__dots{display:none}
/* with the script: the slides stack and fade (300 ms) over the last one; previous and next halves of the panel; numbers */
.evm-js:not(.evm-nojs) .evm-sl__track{display:grid;overflow:visible}
.evm-js:not(.evm-nojs) .evm-sl__s{grid-area:1/1;opacity:0;visibility:hidden}
.evm-js:not(.evm-nojs) .evm-sl__s.is-prev{opacity:1;visibility:visible;z-index:1}
.evm-js:not(.evm-nojs) .evm-sl__s.is-on{opacity:1;visibility:visible;z-index:2;transition:opacity .3s ease}
.evm-js:not(.evm-nojs) .evm-sl__btn{display:block}
.evm-js:not(.evm-nojs) .evm-sl__dots{display:flex}
.evm-sl__btn{position:absolute;z-index:35;top:0;width:25%;height:calc(100% - 50px);padding:0;border:0;background:none;color:inherit;cursor:pointer}
.evm-sl__btn--prev{right:25%}
.evm-sl__btn--next{right:0}
.evm-sl__btn:focus-visible{outline-offset:-6px}
.evm-sl__ar{display:none}
@media(min-width:61.25em){
  .evm-sl__ar{display:block;position:fixed;left:0;top:0;z-index:50;width:42px;height:42px;margin:-21px 0 0 -21px;opacity:0;
    pointer-events:none;transition:opacity .1s linear}
  .evm-sl__ar:before{content:"";position:absolute;left:4px;right:4px;top:50%;height:1px;background:var(--evm-olive)}
  .evm-sl__ar:after{content:"";position:absolute;right:5px;top:50%;width:12px;height:12px;border-top:1px solid var(--evm-olive);
    border-right:1px solid var(--evm-olive);transform:translateY(-50%) rotate(45deg)}
  .evm-sl__btn--prev .evm-sl__ar{rotate:180deg}
  .evm-sl__btn:hover .evm-sl__ar{opacity:1}
  .evm-sl__btn:focus-visible .evm-sl__ar{opacity:1;position:absolute;left:50%;top:50%;transform:none!important}
}
@media(min-width:61.25em) and (hover:hover){.evm-sl__btn{cursor:none}}
.evm-sl__dots{position:absolute;z-index:40;left:0;bottom:3px;width:100%;justify-content:center;margin:0}
@media(min-width:61.25em){.evm-sl__dots{left:50%;width:50%}}
.evm-sl__dots button{position:relative;width:44px;height:44px;padding:0;border:0;background:none;color:inherit;font:300 14px/1 var(--evm-sans);
  cursor:pointer}
.evm-sl__dots button:before{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:1px solid transparent;
  border-radius:10px;transition:border-color .3s linear}
.evm-sl__dots button[aria-current="true"]:before{border-color:var(--evm-olive)}

/* ---------------------------------------------------------------- Say hi: the preview form on olive, two photos beside */
.evm-fm{padding:75px 0}
@media(min-width:61.25em){.evm-fm{padding:150px 0 105px}}
@media(min-width:90em){.evm-fm{padding:200px 0 155px}}
.evm-fm__w{display:flex;flex-wrap:wrap}
.evm-fm__in{width:calc(100% / 40 * 34);margin:0 0 50px calc(100% / 40 * 3)}
.evm-fm__m{width:calc(100% / 40 * 34);margin-left:calc(100% / 40 * 3);display:flex;flex-direction:column}
@media(min-width:61.25em){
  .evm-fm__in{width:calc(100% / 40 * 18);margin:0 0 0 calc(100% / 40 * 2)}
  .evm-fm__m{width:calc(100% / 40 * 16);margin-left:calc(100% / 40 * 2)}
}
@media(min-width:90em){.evm-fm__m{width:calc(100% / 40 * 14);margin-left:calc(100% / 40 * 4)}}
@media(min-width:120em){.evm-fm__m{width:calc(100% / 40 * 12);margin-left:calc(100% / 40 * 6)}}
.evm-fm__m1{width:50%}
.evm-fm__m2{width:66%;margin-left:auto;padding-top:50px}
@media(min-width:61.25em){.evm-fm__m2{padding-top:40%}}
.evm-fm__m img{width:100%}
.evm-fm fieldset{border:0;margin:0;padding:0;min-width:0}
.evm-fds{display:flex;flex-wrap:wrap;column-gap:90px}
.evm-fd{width:100%;margin-bottom:35px}
@media(min-width:48em){.evm-fd--h{width:calc(50% - 45px)}}
.evm-fd label{display:block;font-size:15px;margin-bottom:5px}
.evm-fd input,.evm-fd select,.evm-fd textarea{display:block;width:100%;max-width:100%;margin:0;padding:0 0 5px 5px;border:0;
  border-bottom:1px solid var(--evm-yellow);border-radius:0;background:transparent;color:var(--evm-yellow);font:400 16px/1.5 var(--evm-sans);
  letter-spacing:-.02em;appearance:none;-webkit-appearance:none;transition:box-shadow .1s linear}
.evm-fd input:focus,.evm-fd select:focus,.evm-fd textarea:focus{box-shadow:inset 0 -1px 0 0 var(--evm-yellow)}
.evm-fd select{padding-right:35px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23FEFADB' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 4px center}
.evm-fd select option{color:#222;background:#fff}
.evm-fd textarea{border:1px solid var(--evm-yellow);padding:10px;margin-top:5px;min-height:142px;resize:vertical}
.evm-fd input::placeholder,.evm-fd textarea::placeholder{color:var(--evm-yellow);opacity:.7}
.evm-fm__f{margin-top:30px}
.evm-send{background:none;border:0;padding:11px 4px 17px;margin:-11px -4px;color:var(--evm-yellow);font:400 16px/1 var(--evm-sans);letter-spacing:-.02em;cursor:pointer}
/* Send is a 44 px square at least; its rule keeps to the word */
.evm-send:after{right:4px;width:calc(100% - 8px)}
.evm-fm__n{font-size:14px;margin:20px 0 0}
.evm-res:focus{outline:0}
.evm-res__s{font-size:16px;margin:0 0 25px;border-left:1px solid var(--evm-yellow);padding-left:16px}
.evm-res__m a{text-decoration:underline;text-underline-offset:3px}
.evm-res button{margin-top:30px;background:none;border:0;padding:11px 0 17px;color:var(--evm-yellow);font:400 16px/1 var(--evm-sans);cursor:pointer}

/* ---------------------------------------------------------------- contact: photos sliding sideways with the scroll */
.evm-hs{width:100%;overflow-x:auto}
.evm-motion .evm-hs{overflow:hidden}
.evm-hs__items{display:flex;gap:40px;width:max-content;margin:0;padding:0 5vw}
@media(min-width:90em){.evm-hs__items{gap:90px}}
@media(min-width:2400px){.evm-hs__items{padding:0 calc((100vw - 2400px) / 2 + 5vw)}}
.evm-hs__i{flex:none}
.evm-hs__i img{width:auto;max-width:none;height:250px}
@media(min-width:46em){.evm-hs__i img{height:350px}}
@media(min-width:61.25em){.evm-hs__i img{height:450px}}
@media(min-width:90em){.evm-hs__i img{height:610px}}
@media(min-width:100em){.evm-hs__i img{height:710px}}

/* ---------------------------------------------------------------- photo groups placed from the reference's boxes */
/* story scatters and guide photos: the group is 1280 of every 1440 px from 736 px (2133 at most) and the whole window
   below, as the reference's gallery; each photo's box is a fraction of it (container units), so the composition scales
   with the window and reserves its height before any photo arrives. Phone boxes (--px, --py, --pw) where the
   reference's phone layout differs from the scaled one */
.evm-pg{container-type:inline-size;width:100%;margin:0 auto}
@media(min-width:46em){.evm-pg{width:calc(100% / 1440 * 1280);max-width:2133px}}
.evm-pg__c{position:relative;height:calc(var(--ph,var(--h)) * 100cqw)}
.evm-pg__i{position:absolute;left:calc(var(--px,var(--x)) * 100%);top:calc(var(--py,var(--y)) * 100cqw);width:calc(var(--pw,var(--w)) * 100%)}
@media(min-width:46em){
  .evm-pg__c{height:calc(var(--h) * 100cqw)}
  .evm-pg__i{left:calc(var(--x) * 100%);top:calc(var(--y) * 100cqw);width:calc(var(--w) * 100%)}
}
.evm-pg__i img{width:100%}
@media(max-width:45.99em){.evm-pg--fit{width:calc(100% / 15 * 13)}}

/* ---------------------------------------------------------------- story pages: scatter, notes, the details */
/* the scatter starts 79 px under the intro on phones and 168 at 1440, and the details 114 and 238 under its last
   photo (the reference's) */
.evm-ss{margin-top:79px;margin-bottom:114px}
@media(min-width:61.25em){.evm-ss{margin-top:130px;margin-bottom:180px}}
@media(min-width:90em){.evm-ss{margin-top:168px;margin-bottom:238px}}
.evm-ss--a{margin-bottom:60px}
.evm-ss--b{margin-top:60px}
@media(min-width:61.25em){.evm-ss--a{margin-bottom:100px}.evm-ss--b{margin-top:100px}}
@media(min-width:90em){.evm-ss--a{margin-bottom:120px}.evm-ss--b{margin-top:120px}}
/* the details: a title and short lines in the left column, as the reference's vendors list */
.evm-dt__l{width:calc(100% / 40 * 34);margin-left:calc(100% / 40 * 3)}
@media(min-width:61.25em){.evm-dt__l{width:calc(100% / 40 * 12);margin-left:calc(100% / 40 * 2)}}
@media(min-width:90em){.evm-dt__l{width:calc(100% / 40 * 10);margin-left:calc(100% / 40 * 4)}}
.evm-dt .evm-h2{margin-bottom:15px}
.evm-dt p{line-height:1.6}
/* an underlined link inside a line of text, with a 44 px tall target */
.evm-tx{position:relative;font-weight:400;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.evm-tx:before{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:44px;transform:translateY(-50%)}
.evm-tx:hover{text-decoration-color:transparent}

/* ---------------------------------------------------------------- guides: the reference's article */
.evm-ar{margin-top:79px;margin-bottom:114px}
@media(min-width:61.25em){.evm-ar{margin-top:95px;margin-bottom:180px}}
@media(min-width:90em){.evm-ar{margin-top:125px;margin-bottom:240px}}
/* the text column: about 1010 px (the reference's measure), 16 px type on a 27 px pitch, 3/40 of the window a side on
   phones */
.evm-ar__tx{max-width:calc(40em + 15%);margin:50px auto;padding:0 7.5%;line-height:27px}
@media(min-width:61.25em){.evm-ar__tx{margin:80px auto}}
.evm-ar__tx p,.evm-ar__tx ul{margin:0 0 27px}
.evm-ar__tx>:last-child{margin-bottom:0}
.evm-ar__h{font-size:24px;line-height:1.4;margin:50px 0 15px}
@media(min-width:100em){.evm-ar__h{font-size:30px}}
.evm-ar__tx>.evm-ar__h:first-child{margin-top:0}
.evm-ar__q{margin:0 0 27px;padding-left:20px;border-left:1px solid currentColor;font:400 20px/1.5 var(--evm-serif);letter-spacing:0}
@media(min-width:90em){.evm-ar__q{font-size:24px}}
.evm-ar__q p{margin:0}
.evm-ar__g{margin:50px 0}
@media(min-width:61.25em){.evm-ar__g{margin:80px 0}}
.evm-ar>.evm-c>.evm-ar__g:first-child{margin-top:0}
.evm-ar>.evm-c>.evm-ar__g:last-child{margin-bottom:0}
.evm-sx .evm-ar__tx{margin:0 auto}
/* small lists: a plus before each line (the site's list mark; no dashes) */
.evm-ls{list-style:none}
.evm-ls li{position:relative;padding-left:1.25em}
.evm-ls li:before{content:"+";position:absolute;left:0}
.evm-ls--links li{padding-left:0}
.evm-ls--links li:before{content:none}
.evm-ls--links li+li{margin-top:12px}
.evm-lt--short .evm-ls{margin:5px 0 25px}
/* the notice date finder (the legal guide); it needs the script, so it shows only when that runs */
.evm-nf{margin:40px 0;padding:30px 0;border-top:1px solid var(--evm-olive);border-bottom:1px solid var(--evm-olive)}
html:not(.evm-js) .evm-nf,.evm-nojs .evm-nf{display:none}
.evm-nf label{display:block;font-size:15px;margin-bottom:5px}
.evm-nf input{display:block;width:100%;max-width:320px;min-height:44px;margin:0 0 20px;padding:0 0 5px 5px;border:0;border-bottom:1px solid var(--evm-olive);
  border-radius:0;background:transparent;color:inherit;font:400 16px/1.5 var(--evm-sans);letter-spacing:-.02em}
.evm-nf input::placeholder{color:var(--evm-olive);opacity:.7}
.evm-nf output{display:block;font:400 20px/1.4 var(--evm-serif);letter-spacing:0}
.evm-nf .evm-nf__n{margin:20px 0 0;font-size:14px;line-height:1.5}

/* ---------------------------------------------------------------- story and guide intros, the stories list */
/* every intro paragraph at the lead size, then the type boxes 30 px under them and the reading time 10 px under those */
.evm-in__c--all p{font-size:18px;line-height:1.5}
@media(min-width:71.875em){.evm-in__c--all p{font-size:21px}}
.evm-in__c p+.evm-tags{margin-top:30px}
.evm-in__c .evm-tags+.evm-meta{margin-top:-15px}
/* filter boxes: the small outline boxes, the chosen one filled; they need the script, so they show only when it runs */
.evm-fl{gap:15px}
.evm-fl .evm-btn{font-family:inherit;font-size:14px;font-weight:300;letter-spacing:inherit;background:none;cursor:pointer;margin:0}
.evm-fl .evm-btn[aria-pressed="true"]{color:var(--ch)}
.evm-fl .evm-btn[aria-pressed="true"]:after{transform:scaleX(1)}
html:not(.evm-js) .evm-fl,.evm-nojs .evm-fl{display:none}
/* the seven card tile on 20 columns from 736 px (the reference's own values), a thin ridge line behind its first card
   and a shorter one lower down; one column of cards on phones */
.evm-sgw{margin:75px 0}
@media(min-width:46em){.evm-sgw{margin:85px 0 100px}}
.evm-sg{position:relative;padding:0 calc(100% / 40 * 3)}
.evm-sg__i:not(:last-child){margin-bottom:50px}
@media(min-width:46em){
  .evm-sg{display:grid;padding:0;grid-template-columns:repeat(20,1fr);grid-auto-rows:minmax(100px,auto)}
  .evm-sg__i:not(:last-child){margin-bottom:0}
  .evm-sg__i:nth-child(7n-6){grid-column:6/span 4}
  .evm-sg__i:nth-child(7n-6):before{content:"";position:absolute;left:0;width:100%;height:179px;
    background:url("/examples/elena-vale-modern/assets/ridges/ridge-line.svg") repeat-x top center}
  .evm-sg__i:nth-child(7n-5){grid-column:12/span 6;margin-top:40%}
  .evm-sg__i:nth-child(7n-4){grid-column:2/span 4;margin-top:-120%}
  .evm-sg__i:nth-child(7n-3){grid-column:7/span 5;margin-top:100%}
  .evm-sg__i:nth-child(7n-3):before{content:"";position:absolute;left:0;width:100%;height:100px;margin-top:15%;
    background:url("/examples/elena-vale-modern/assets/ridges/ridge-line-stories.svg") repeat-x top center}
  .evm-sg__i:nth-child(7n-2){grid-column:16/span 4;margin-top:80%}
  .evm-sg__i:nth-child(7n-1){grid-column:3/span 6;margin-top:30%}
  .evm-sg__i:nth-child(7n-1):not(:nth-last-child(-n+2)){margin-bottom:30%}
  .evm-sg__i:nth-child(7n){grid-column:13/span 4;margin-top:90%}
}
@media(min-width:90em){
  .evm-sg__i:nth-child(7n-6){grid-column:7/span 3}
  .evm-sg__i:nth-child(7n-3){grid-column:8/span 4}
  .evm-sg__i:nth-child(7n-2){grid-column:17/span 3}
  .evm-sg__i:nth-child(7n){grid-column:13/span 3}
}
/* card titles: the reference hides them from 736 px and shows them only on hover from 1150, so touch screens never
   see them; ours hide only where a pointer can hover (1150 up) and show on hover or keyboard focus (ledgered) */
@media(min-width:71.875em) and (hover:hover){
  .evm-sg .evm-card__t{opacity:0;transition:opacity .3s ease-out}
  .evm-sg .evm-card__a:hover .evm-card__t,.evm-sg .evm-card__a:focus-visible .evm-card__t{opacity:1}
}

/* ---------------------------------------------------------------- reveals (only with JavaScript and full motion) */
.evm-motion [data-fade]{opacity:0}
.evm-motion [data-fade].is-in{opacity:1;transition:opacity .5s cubic-bezier(.25,.46,.45,.94) var(--d,0s)}
.evm-motion [data-clip]{opacity:0}
.evm-motion [data-clip].is-split{opacity:1}
.evm-ln{display:block;overflow:clip;overflow-clip-margin:8px}
.evm-ln__i{display:block;transform:translateY(101%)}
.evm-ln__i.is-in{transform:translateY(0);transition:transform .6s cubic-bezier(.25,.46,.45,.94) var(--d,0s)}
[data-px]{will-change:transform}
@media(prefers-reduced-motion:reduce){
  .evm-bn__s,.evm-ov__btm{animation:none;opacity:1}
  .evm-ln__i{transform:none}
  [data-px]{transform:none!important;will-change:auto}
}