/* Elena Celeste — The reading table.
   A photographic opening, a physical deck, and five connected chapters.
   Scoped to the home and shared narrative; everything works without motion. */
.ec-story-page,.ec-narrative {
  --story-plum:#28132e; --story-deep:#211125; --story-paper:#fff; --story-blush:#fae7ee;
  --story-pink:#cf086b; --story-pink-hover:#aa0656; --story-gold:#ecce9f;
  --story-muted:#6c576b; --story-line:#dfd2dc; --story-serif:"Fraunces",Georgia,serif;
  --story-sans:"Archivo",system-ui,-apple-system,sans-serif; --story-ease:cubic-bezier(.2,.7,.2,1);
  color:var(--story-plum); font-family:var(--story-sans);
}
.rf-body.ec-story-page { margin:0; background:#fff; color:var(--story-plum); }
/* Keep the reading stage attached to the viewport, including in Safari.
   Decorative clipping is owned by the individual scene, never its ancestor. */
.ec-story-page main { overflow:visible; }
.ec-story-page .rf-wrap,.ec-narrative .rf-wrap { width:min(1456px,100%); padding-inline:clamp(24px,5.2vw,84px); }
.ec-story-page [id],.ec-narrative [id] { scroll-margin-top:110px; }
.ec-story-page [hidden],.ec-narrative [hidden] { display:none!important; }
.ec-story-page :focus-visible,.ec-narrative :focus-visible { outline:3px solid var(--story-pink); outline-offset:6px; }
.ec-story-page ::selection,.ec-narrative ::selection { background:var(--story-gold); color:var(--story-plum); }
.ec-narrative h2,.ec-narrative h3,.ec-story-page .ec-hero h1 { font-family:var(--story-serif); font-weight:500; letter-spacing:-.045em; text-wrap:balance; }
.ec-narrative p { line-height:1.7; }
.ec-narrative .ec-anchor { display:block; height:0; }
.ec-story-page .ec-skip { position:fixed; z-index:90; top:12px; left:20px; padding:14px 20px; background:#fff; color:var(--story-plum); transform:translateY(-160%); }
.ec-story-page .ec-skip:focus { transform:none; }

/* A small, disciplined frame around the scene. */
.ec-story-page .rf-topbar { padding:8px 20px; background:var(--story-deep); color:#f3e1eb; font-size:11px; font-weight:400; }
.ec-story-page .rf-header--nav { background:#fff; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.ec-story-page .rf-header__inner { min-height:85px; gap:26px; }
.ec-story-page .rf-logo,.ec-story-page .rf-logo__mark { color:var(--story-plum); }
.ec-story-page .rf-logo__text small { color:var(--story-muted); }
.ec-story-page .rf-nav { gap:24px; }
.ec-story-page .rf-nav a { color:var(--story-plum); font-size:12px; font-weight:500; }
.ec-story-page .rf-header.is-scrolled { box-shadow:0 3px 24px rgb(40 19 46 / 8%); }
.ec-story-page .ec-language { display:inline-flex; align-items:center; gap:7px; }
.ec-story-page .ec-language a { display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:26px; font-size:11px; color:var(--story-muted); text-decoration:none; }
.ec-story-page .ec-language a[aria-current=true] { color:var(--story-plum); text-decoration:underline; text-underline-offset:6px; }
.ec-story-page .ec-nav-toggle { display:none; }
.ec-story-page .ec-mobile-menu { position:absolute; z-index:35; top:100%; left:0; right:0; padding:16px 30px 22px; border-top:1px solid var(--story-line); background:#fff; box-shadow:0 16px 24px rgb(40 19 46 / 10%); }
.ec-story-page .ec-mobile-menu a { display:flex; align-items:center; min-height:48px; border-bottom:1px solid #eee4ec; color:var(--story-plum); font-size:15px; text-decoration:none; }
.ec-story-page .ec-mobile-menu .ec-language { display:flex; gap:26px; margin-top:12px; }
.ec-story-page .ec-mobile-menu .ec-language a { border:0; font-size:13px; }
.rf-body.ec-story-page .rf-btn,.rf-body .ec-narrative .rf-btn {
  width:auto; min-height:57px; padding:18px 28px; gap:18px; border:0; border-radius:3px;
  background-color:#cf086b; background-image:none; color:#fff; font:600 15px/1.3 var(--story-sans);
  isolation:auto;
  box-shadow:none; letter-spacing:0; text-decoration:none; transition:transform .2s;
}
.rf-body.ec-story-page .rf-btn::after,.rf-body .ec-narrative .rf-btn::after { display:none; }
.rf-body.ec-story-page .rf-btn:hover,.rf-body .ec-narrative .rf-btn:hover { background-color:#aa0656; background-image:none; box-shadow:none; }
.rf-body.ec-story-page .rf-btn:active,.rf-body .ec-narrative .rf-btn:active { transform:translateY(1px); }
.rf-body.ec-story-page .rf-header .rf-btn { min-height:43px; padding:12px 17px; gap:9px; font-size:12px; }
.ec-narrative .ec-text-link { display:inline-flex; align-items:center; gap:15px; min-height:44px; color:var(--story-pink); font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:6px; }
.ec-narrative .ec-text-link .rf-ico { width:20px; height:20px; }

/* The table extends beyond the photograph into the page. */
.ec-story-page .ec-hero { position:relative; z-index:2; isolation:isolate; background:var(--story-deep); color:#fff; }
.ec-story-page .ec-hero__image { position:absolute; z-index:-2; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:75% 40%; }
.ec-story-page .ec-hero::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgb(28 12 31 / 87%),rgb(28 12 31 / 62%) 35%,rgb(28 12 31 / 9%) 64%,transparent 85%); pointer-events:none; }
.ec-story-page .ec-hero__inner { position:relative; display:flex; align-items:center; min-height:775px; padding-top:86px; padding-bottom:112px; }
.ec-story-page .ec-hero__copy { width:50%; max-width:645px; }
.ec-story-page .ec-hero__intro { margin:0 0 26px; color:var(--story-gold); font-size:13px; font-weight:500; }
.ec-story-page .ec-hero h1 { max-width:14ch; margin:0 0 29px; color:#fff; font-size:clamp(54px,5.45vw,76px); line-height:1.045; }
.ec-story-page .ec-hero__lead { max-width:40ch; margin:0 0 31px; color:#f1e4ed; font-size:17px; line-height:1.75; }
.ec-story-page .ec-hero__note { display:flex; align-items:center; gap:9px; margin:17px 0 0; color:#d9c5d5; font-size:11px; line-height:1.6; }
.ec-story-page .ec-hero__signature { position:absolute; right:9%; bottom:222px; font:400 26px/1.2 var(--story-serif); color:#fff; text-align:center; text-shadow:0 2px 14px #28132e; }
.ec-story-page .ec-hero__signature span { display:block; margin-top:8px; font:400 10px/1.4 var(--story-sans); color:#eadbe5; }
.ec-story-page .ec-hero__scroll { position:absolute; bottom:31px; left:clamp(24px,5.2vw,84px); display:flex; align-items:center; gap:15px; padding-block:10px; color:#dac6d6; font-size:11px; text-decoration:none; }
.ec-story-page .ec-hero__scroll .rf-ico { width:18px; height:18px; }
.ec-story-page .ec-hero :focus-visible { outline-color:var(--story-gold); }

/* The visitor's situation, with room to actually read it. */
.ec-narrative .ec-section-heading { max-width:840px; margin-bottom:56px; }
.ec-narrative .ec-section-heading > p:first-child:not(:last-child) { margin:0 0 19px; color:var(--story-pink); font-size:12px; font-weight:500; }
.ec-narrative .ec-section-heading h2 { margin:0; color:var(--story-plum); font-size:clamp(40px,4.65vw,68px); line-height:1.08; }
.ec-narrative .ec-section-heading h2 + p { max-width:55ch; margin:24px 0 0; color:var(--story-muted); font-size:16px; font-weight:400; }

/* Future customer videos have a real place; placeholders remain unmistakable. */
.ec-narrative .ec-stories { padding-block:106px 94px; background:var(--story-blush); }
.ec-narrative .ec-stories .ec-section-heading { max-width:920px; margin-bottom:42px; }
.ec-narrative .ec-video-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.ec-narrative .ec-video-story { position:relative; isolation:isolate; overflow:hidden; min-width:0; aspect-ratio:9/14; margin:0; border-radius:5px; background:var(--story-plum); color:#fff; }
.ec-narrative .ec-video-story::after { content:""; position:absolute; z-index:0; inset:0; background:linear-gradient(180deg,transparent 30%,rgb(40 19 46 / 92%) 100%); pointer-events:none; }
.ec-narrative .ec-video-story > img { width:100%; height:100%; object-fit:cover; }
.ec-narrative .ec-video-story figcaption { position:absolute; z-index:1; left:23px; right:23px; bottom:25px; }
.ec-narrative .ec-video-story figcaption > span { display:block; margin-bottom:10px; color:#f4e0eb; font-size:10px; }
.ec-narrative .ec-video-story h3 { margin:0; color:#fff; font-size:27px; line-height:1.15; }
.ec-narrative .ec-video-story small { display:block; margin-top:13px; color:#e3cedf; font-size:10px; line-height:1.6; }
.ec-narrative .ec-video-play { position:absolute; z-index:2; top:42%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:72px; height:72px; padding:0; border:1px solid #e6d7e1; border-radius:50%; background:#fff; color:var(--story-plum); }
.ec-narrative .ec-video-play .rf-ico { width:22px; height:22px; margin-left:3px; }
.ec-narrative .ec-video-play[aria-disabled=true] { cursor:default; opacity:1; }
.ec-narrative .ec-video-story.is-placeholder { --ugc-text:#fff; --ugc-muted:#e5d6e3; border:1px solid #4d3550; background:#351d3c; color:var(--ugc-text); }
.ec-narrative .ec-video-story.is-placeholder:nth-child(2) { --ugc-text:#28132e; --ugc-muted:#6c576b; background:#fff; border-color:#dbcbd5; }
.ec-narrative .ec-video-story.is-placeholder:nth-child(3) { --ugc-text:#28132e; --ugc-muted:#6c576b; background:#eedbe5; border-color:#d6bccd; }
.ec-narrative .ec-video-story.is-placeholder:nth-child(4) { background:#4e2a48; border-color:#674661; }
.ec-narrative .ec-video-story.is-placeholder::after { display:none; }
.ec-narrative .ec-ugc-placeholder { position:absolute; top:25px; left:25px; color:var(--ugc-text); opacity:.36; font:400 57px/1 var(--story-serif); letter-spacing:-.055em; pointer-events:none; }
.ec-narrative .is-placeholder figcaption > span,.ec-narrative .is-placeholder small { color:var(--ugc-muted); }
.ec-narrative .is-placeholder h3 { color:var(--ugc-text); font-size:25px; }
.ec-narrative .ec-video-story.is-playing > img,.ec-narrative .ec-video-story.is-playing figcaption,.ec-narrative .ec-video-story.is-playing .ec-video-play,.ec-narrative .ec-video-story.is-playing::after { display:none; }
.ec-narrative .ec-video-story video { position:absolute; z-index:3; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.ec-narrative .ec-media-note { margin:20px 0 0; color:var(--story-muted); font-size:11px; }

/* Elena's portrait fills the margin; the title reaches into its quiet edge. */
.ec-narrative .ec-meet { position:relative; isolation:isolate; min-height:780px; background:var(--story-blush); }
.ec-narrative .ec-meet__portrait { position:absolute; z-index:-1; inset:0 56% 0 0; }
.ec-narrative .ec-meet__portrait img { width:100%; height:100%; object-fit:cover; object-position:50% 35%; }
.ec-narrative .ec-meet__inner { display:flex; justify-content:flex-end; min-height:780px; }
.ec-narrative .ec-meet__copy { align-self:center; width:49%; padding:82px 0 82px 15px; }
.ec-narrative .ec-meet__intro { margin:0 0 15px; color:var(--story-pink); font-size:12px; }
.ec-narrative .ec-meet h2 { position:relative; width:calc(100% + 90px); margin:0 0 28px -90px; padding:13px 0 18px 36px; background:var(--story-blush); color:var(--story-plum); font-size:clamp(43px,4.4vw,64px); line-height:1.1; }
.ec-narrative .ec-meet__copy > p:not(.ec-meet__intro) { margin:0 0 22px; color:var(--story-muted); font-size:16px; line-height:1.8; }
.ec-narrative .ec-meet .ec-text-link { margin-top:5px; }
.ec-narrative .ec-meet small { display:block; max-width:45ch; margin-top:22px; color:var(--story-muted); font-size:10px; line-height:1.7; }

/* A real sequence, connected with a single line. */
.ec-narrative .ec-method { padding-block:124px; background:#fff; }
.ec-narrative .ec-method .ec-section-heading { max-width:880px; }
.ec-narrative .ec-steps { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:64px; margin:0; padding:0; list-style:none; }
.ec-narrative .ec-steps::before { content:""; position:absolute; top:31px; left:20px; right:12%; height:1px; background:#d8c2d0; }
.ec-narrative .ec-steps li { position:relative; }
.ec-narrative .ec-steps li > span { position:relative; display:block; width:75px; margin-bottom:28px; background:#fff; color:var(--story-pink); font:400 62px/1 var(--story-serif); }
.ec-narrative .ec-steps h3 { margin:0 0 17px; font-size:32px; line-height:1.18; }
.ec-narrative .ec-steps p { max-width:37ch; margin:0; color:var(--story-muted); font-size:15px; }
.ec-narrative .ec-questions { padding-block:105px 112px; background:#f8f2f6; }
.ec-narrative .ec-questions__layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(60px,8vw,120px); }
.ec-narrative .ec-questions .ec-section-heading { margin:0; }
.ec-narrative .ec-questions .ec-section-heading h2 { font-size:clamp(39px,4vw,58px); }
.ec-narrative .ec-questions .ec-section-heading h2 + p { max-width:32ch; font-size:15px; }
.ec-narrative .ec-faq { border-top:1px solid #d7c7d3; }
.ec-narrative .ec-faq details { border-bottom:1px solid #d7c7d3; }
.ec-narrative .ec-faq summary { position:relative; padding:25px 44px 25px 0; list-style:none; cursor:pointer; color:var(--story-plum); font-size:15px; font-weight:500; line-height:1.55; }
.ec-narrative .ec-faq summary::-webkit-details-marker { display:none; }
.ec-narrative .ec-faq summary > span { display:none; }
.ec-narrative .ec-faq summary::after { content:"+"; position:absolute; top:23px; right:3px; color:var(--story-pink); font:400 27px/1 var(--story-sans); }
.ec-narrative .ec-faq details[open] summary::after { content:"−"; }
.ec-narrative .ec-faq details[open] summary { padding-bottom:13px; }
.ec-narrative .ec-faq details > p { margin:0; padding:0 33px 26px 0; color:var(--story-muted); font-size:14px; line-height:1.8; }

.ec-story-page .rf-footer { padding-block:60px 43px; background:#fff; border:0; }
.ec-story-page .rf-footer__logo { color:var(--story-plum); font-size:33px; }
.ec-story-page .rf-footer__tag { color:var(--story-muted); font-size:12px; }
.ec-story-page .rf-footer__nav { border-color:var(--story-line); }
.ec-story-page .rf-footer__nav a { color:var(--story-plum); font-size:12px; }
.ec-story-page .rf-footer__legal { color:var(--story-muted); font-size:10px; }
.ec-story-page .ec-mobile-cta { display:none; }

@media (min-width:1600px) {
  .ec-story-page .ec-hero__inner { min-height:825px; }
}
@media (max-width:1100px) {
  .ec-story-page .rf-nav { display:none; }
  .ec-story-page .rf-header__inner { gap:16px; }
  .ec-story-page .rf-header__inner > .ec-language { display:none; }
  .ec-story-page .ec-nav-toggle { display:inline-flex; flex:none; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:42px; height:42px; padding:8px; border:1px solid var(--story-line); border-radius:3px; background:#fff; color:var(--story-plum); }
  .ec-story-page .ec-nav-toggle span { display:block; width:19px; height:1px; background:currentColor; transition:transform .2s; }
  .ec-story-page .ec-nav-toggle[aria-expanded=true] span:first-child { transform:translateY(3.5px) rotate(45deg); }
  .ec-story-page .ec-nav-toggle[aria-expanded=true] span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
  .ec-story-page .ec-hero__inner { min-height:740px; }
  .ec-story-page .ec-hero h1 { font-size:58px; }
  .ec-story-page .ec-hero__lead { font-size:15px; }
  .ec-narrative .ec-video-grid { gap:15px; }
  .ec-narrative .ec-video-story figcaption { left:18px; right:18px; bottom:22px; }
  .ec-narrative .ec-video-story h3 { font-size:24px; }
  .ec-narrative .ec-meet__copy { width:50%; }
  .ec-narrative .ec-meet h2 { margin-left:-60px; width:calc(100% + 60px); padding-left:25px; }
  .ec-narrative .ec-steps { gap:35px; }
}
@media (max-width:800px) {
  .ec-story-page .rf-wrap,.ec-narrative .rf-wrap { padding-inline:30px; }
  .ec-story-page .ec-hero__image { height:555px; object-position:74% 31%; }
  .ec-story-page .ec-hero::after { background:linear-gradient(180deg,transparent 250px,rgb(33 17 37 / 83%) 430px,var(--story-deep) 555px); }
  .ec-story-page .ec-hero__inner { display:block; min-height:0; padding-top:458px; padding-bottom:127px; }
  .ec-story-page .ec-hero__copy { width:100%; max-width:640px; }
  .ec-story-page .ec-hero h1 { max-width:16ch; font-size:clamp(50px,8.1vw,63px); }
  .ec-story-page .ec-hero__lead { max-width:51ch; font-size:16px; }
  .ec-story-page .ec-hero__signature { top:350px; bottom:auto; right:35px; font-size:24px; }
  .ec-story-page .ec-hero__scroll { left:30px; bottom:33px; }
  .ec-narrative .ec-section-heading h2 { font-size:48px; }
  .ec-narrative .ec-section-heading { margin-bottom:40px; }
  .ec-narrative .ec-stories { padding-block:83px 76px; }
  .ec-narrative .ec-video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
  .ec-narrative .ec-video-story h3 { font-size:28px; }
  .ec-narrative .ec-meet__copy { padding-block:65px; }
  .ec-narrative .ec-meet h2 { font-size:41px; }
  .ec-narrative .ec-meet__copy > p:not(.ec-meet__intro) { font-size:14px; }
  .ec-narrative .ec-method { padding-block:88px; }
  .ec-narrative .ec-steps { gap:25px; }
  .ec-narrative .ec-steps h3 { font-size:27px; }
  .ec-narrative .ec-steps p { font-size:14px; }
  .ec-narrative .ec-questions { padding-block:83px; }
  .ec-narrative .ec-questions__layout { grid-template-columns:1fr; gap:35px; }
  .ec-narrative .ec-questions .ec-section-heading h2 + p { max-width:52ch; }
}
@media (max-width:600px) {
  .ec-story-page .rf-wrap,.ec-narrative .rf-wrap { padding-inline:24px; }
  .ec-story-page [id],.ec-narrative [id] { scroll-margin-top:91px; }
  .ec-story-page .rf-topbar { padding:8px 18px; font-size:10px; }
  .ec-story-page .rf-header__inner { min-height:72px; gap:14px; }
  .ec-story-page .rf-logo { font-size:24px; gap:8px; }
  .ec-story-page .rf-logo__mark { width:26px; height:26px; }
  .ec-story-page .rf-logo__text small { font-size:8px; }
  .rf-body.ec-story-page .rf-header__inner > .rf-btn { display:none; }
  .ec-story-page .ec-nav-toggle { width:39px; height:40px; }
  .ec-story-page .ec-mobile-menu { padding-inline:24px; }
  .ec-story-page .ec-hero__image { height:457px; object-position:75% 29%; }
  .ec-story-page .ec-hero::after { background:linear-gradient(180deg,transparent 185px,rgb(33 17 37 / 72%) 320px,var(--story-deep) 440px); }
  .ec-story-page .ec-hero__inner { padding-top:346px; padding-bottom:151px; }
  .ec-story-page .ec-hero__copy { max-width:none; }
  .ec-story-page .ec-hero__intro { margin-bottom:18px; font-size:11px; }
  .ec-story-page .ec-hero h1 { max-width:14ch; margin-bottom:24px; font-size:clamp(40px,10.8vw,60px); line-height:1.07; }
  .ec-story-page .ec-hero__lead { max-width:42ch; margin-bottom:27px; font-size:14px; line-height:1.75; }
  .rf-body.ec-story-page .ec-hero .rf-btn { width:100%; min-height:56px; padding-inline:19px; font-size:14px; }
  .ec-story-page .ec-hero__note { justify-content:center; margin-top:14px; font-size:10px; }
  .ec-story-page .ec-hero__signature { top:266px; right:24px; font-size:22px; }
  .ec-story-page .ec-hero__signature span { margin-top:5px; font-size:9px; }
  .ec-story-page .ec-hero__scroll { left:24px; bottom:107px; font-size:10px; gap:10px; }
  .ec-narrative .ec-section-heading { margin-bottom:34px; }
  .ec-narrative .ec-section-heading > p:first-child:not(:last-child) { margin-bottom:17px; font-size:11px; }
  .ec-narrative .ec-section-heading h2 { font-size:39px; line-height:1.11; }
  .ec-narrative .ec-section-heading h2 + p { margin-top:19px; font-size:14px; }
  .ec-narrative .ec-text-link { font-size:13px; }
  .ec-narrative .ec-stories { padding-block:70px 58px; }
  .ec-narrative .ec-video-grid { grid-template-columns:repeat(4,77%); gap:15px; margin-inline:-24px; padding:0 24px 17px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:24px; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#a96e8d #edd5e0; }
  .ec-narrative .ec-video-grid::-webkit-scrollbar { height:3px; }
  .ec-narrative .ec-video-grid::-webkit-scrollbar-thumb { background:#a96e8d; }
  .ec-narrative .ec-video-grid::-webkit-scrollbar-track { background:#edd5e0; }
  .ec-narrative .ec-video-story { scroll-snap-align:start; }
  .ec-narrative .ec-video-story figcaption { left:23px; right:23px; bottom:25px; }
  .ec-narrative .ec-video-story h3 { font-size:27px; }
  .ec-narrative .ec-media-note { margin-top:18px; font-size:10px; }
  .ec-narrative .ec-meet { min-height:0; padding-top:calc(min(135vw,600px) + 30px); }
  .ec-narrative .ec-meet__portrait { inset:0 0 auto; height:min(135vw,600px); }
  .ec-narrative .ec-meet__portrait img { object-position:center; }
  .ec-narrative .ec-meet__inner { min-height:0; }
  .ec-narrative .ec-meet__copy { width:100%; padding:0 0 75px; }
  .ec-narrative .ec-meet__intro { margin-bottom:15px; font-size:11px; }
  .ec-narrative .ec-meet h2 { width:100%; margin:0 0 24px; padding:0; font-size:42px; }
  .ec-narrative .ec-meet__copy > p:not(.ec-meet__intro) { margin-bottom:20px; font-size:15px; }
  .ec-narrative .ec-meet small { margin-top:19px; font-size:10px; }
  .ec-narrative .ec-method { padding-block:77px; }
  .ec-narrative .ec-steps { grid-template-columns:1fr; gap:33px; }
  .ec-narrative .ec-steps::before { top:22px; bottom:26px; left:16px; right:auto; width:1px; height:auto; }
  .ec-narrative .ec-steps li { display:grid; grid-template-columns:38px minmax(0,1fr); gap:0 18px; }
  .ec-narrative .ec-steps li > span { grid-column:1; grid-row:1 / 3; align-self:start; width:35px; padding-bottom:9px; margin:0; font-size:38px; }
  .ec-narrative .ec-steps h3 { grid-column:2; margin:0 0 12px; font-size:28px; }
  .ec-narrative .ec-steps p { grid-column:2; max-width:none; font-size:14px; }
  .ec-narrative .ec-questions { padding-block:73px; }
  .ec-narrative .ec-questions__layout { gap:30px; }
  .ec-narrative .ec-questions .ec-section-heading h2 { font-size:39px; }
  .ec-narrative .ec-questions .ec-section-heading h2 + p { font-size:14px; }
  .ec-narrative .ec-faq summary { padding:22px 34px 22px 0; font-size:14px; }
  .ec-narrative .ec-faq summary::after { top:21px; font-size:24px; }
  .ec-narrative .ec-faq details > p { padding-right:10px; padding-bottom:24px; font-size:13px; }
  .ec-story-page .rf-footer { padding-block:48px 114px; }
  .ec-story-page .ec-mobile-cta { position:fixed; z-index:40; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; padding:11px 20px calc(11px + env(safe-area-inset-bottom)); border-top:1px solid #e7dae4; background:rgb(255 255 255 / 97%); box-shadow:0 -4px 24px rgb(40 19 46 / 7%); }
  .rf-body.ec-story-page .ec-mobile-cta .rf-btn { flex:1; max-width:440px; min-height:49px; padding:14px 20px; font-size:14px; }
}
@media (max-width:359px) {
  .ec-story-page .rf-wrap,.ec-narrative .rf-wrap { padding-inline:20px; }
  .ec-story-page .rf-logo { font-size:22px; }
  .ec-story-page .ec-hero h1 { font-size:38px; }
  .ec-narrative .ec-section-heading h2 { font-size:36px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   Scenes — the velvet table, the cross spread, and the small lights of the universe.
   Everything below is additive to the layout above; motion starts only once
   .ec-motion-ready is set and stops entirely under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Kickers carry a gold spark. */
.ec-narrative .ec-section-heading > p:first-child:not(:last-child)::before { content:"✦"; margin-right:9px; color:#c7a670; font-size:11px; }

/* Twinkling stars (decorative, deterministic positions from PHP). */
.ec-stars { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.ec-stars i { position:absolute; display:block; left:var(--x); top:var(--y); width:var(--s); height:var(--s); background:#f6e6c3; opacity:0; clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); }
.ec-stars i.is-dot { clip-path:none; border-radius:50%; }
.ec-motion-ready .ec-stars i { animation:ec-twinkle var(--d) ease-in-out infinite; animation-delay:var(--delay); }
@keyframes ec-twinkle { 0%,100% { opacity:0; transform:scale(.5); } 50% { opacity:.92; transform:scale(1); } }

/* Scroll reveals: only armed when IntersectionObserver is available. */
.ec-reveal-armed [data-reveal] { opacity:0; translate:0 26px; transition:opacity .9s var(--story-ease),translate .9s var(--story-ease); }
.ec-reveal-armed [data-reveal].is-in { opacity:1; translate:0 0; }

/* ─── Hero: a quiet sky on the wall, the signature out of the portrait ─── */
.ec-story-page .ec-hero__stars { right:42%; translate:calc(var(--px,0) * 12px) calc(var(--py,0) * 8px); transition:translate 1.2s ease-out; }
.ec-story-page .ec-hero__stars i { background:#e9d6b6; }
@media (min-width:801px) {
  .ec-story-page .ec-hero__signature { right:clamp(24px,5.2vw,84px); bottom:31px; font-size:22px; text-align:right; }
  .ec-story-page .ec-hero__signature span { margin-top:6px; }
}

/* ─── Ribbon: five real cards, dealt then turned ─── */
.ec-story-page .ec-reading-ribbon { position:relative; z-index:1; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:40px; min-height:0; padding:30px max(5.2vw,24px); }
.ec-story-page .ec-reading-ribbon__copy { display:flex; flex-direction:column; align-items:flex-start; gap:12px; max-width:560px; }
.ec-story-page .ec-reading-ribbon__copy > span { max-width:none; color:var(--story-plum); font:400 25px/1.3 var(--story-serif); letter-spacing:-.025em; }
.ec-story-page .ec-reading-ribbon__copy > a { display:inline-flex; align-items:center; gap:12px; color:var(--story-pink); font-size:12px; text-decoration:none; }
.ec-ribbon-deck { position:relative; flex:none; width:440px; height:150px; }
.ec-ribbon-card { position:absolute; left:50%; top:50%; width:78px; height:120px; perspective:700px; transform:translate(-50%,-50%) translate(var(--rx,0px),var(--ry,0px)) rotate(var(--rr,0deg)); transition:transform .9s var(--story-ease); transition-delay:calc(var(--i) * 110ms); }
.ec-ribbon-deck.is-in .ec-ribbon-card { --rx:calc((var(--i) - 2) * 84px); --rr:calc((var(--i) - 2) * 7deg); --ry:0px; }
.ec-ribbon-deck.is-in .ec-ribbon-card:nth-child(1),.ec-ribbon-deck.is-in .ec-ribbon-card:nth-child(5) { --ry:12px; }
.ec-ribbon-deck.is-in .ec-ribbon-card:nth-child(2),.ec-ribbon-deck.is-in .ec-ribbon-card:nth-child(4) { --ry:3px; }
.ec-ribbon-card__back,.ec-ribbon-card__front { position:absolute; inset:0; display:grid; place-items:center; border:1px solid #b89a6d; border-radius:6px; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 12px 18px -10px rgb(18 6 22 / 50%); transition:transform .9s var(--story-ease); transition-delay:calc(750ms + var(--i) * 150ms); }
.ec-ribbon-card__back { background:radial-gradient(circle,rgb(236 206 159 / 55%) .6px,transparent 1.2px) 0 0/8px 8px,linear-gradient(160deg,#4b2949,#321a36); color:#e8cd9c; }
.ec-ribbon-card__back::before { content:""; position:absolute; inset:5px; border:1px solid rgb(236 206 159 / 55%); border-radius:4px; }
.ec-ribbon-card__back .rf-ico { width:28px; height:28px; }
.ec-ribbon-card__front { grid-template-rows:10px minmax(0,1fr) auto; justify-items:center; align-items:center; padding:7px 7px 9px; background:#fff8ec; color:var(--story-plum); transform:rotateY(180deg); }
.ec-ribbon-card__front::before { content:""; position:absolute; inset:5px; border:1px solid #d6c19a; border-radius:3px; }
.ec-ribbon-card__front i { font:400 8px/1 var(--story-serif); font-style:normal; color:#906c43; }
.ec-ribbon-card__front svg { width:72%; height:auto; max-height:100%; color:#603254; }
.ec-ribbon-card__front b { font:500 11px/1 var(--story-serif); letter-spacing:-.01em; }
.ec-ribbon-deck.is-in .ec-ribbon-card__back { transform:rotateY(-180deg); }
.ec-ribbon-deck.is-in .ec-ribbon-card__front { transform:rotateY(0); }

/* ─── Situations: Elena's velvet table, three arcana to choose from, her note beside them ─── */
.ec-narrative .ec-situations { padding-block:120px 0; background:#fff; }
.ec-narrative .ec-situations .ec-section-heading { max-width:760px; margin-bottom:54px; }
.ec-narrative .ec-table { position:relative; isolation:isolate; overflow:hidden; padding:76px max(5.2vw,24px) 90px; background:#2a1326 url('../img/brand/elena-tabletop-v2.webp') 38% 55%/cover no-repeat; color:#f6e9ef; }
.ec-narrative .ec-table::before { content:""; position:absolute; z-index:0; inset:0; background:radial-gradient(120% 95% at 32% 42%,rgb(42 19 38 / 12%),rgb(28 11 26 / 80%) 78%),linear-gradient(180deg,rgb(255 255 255 / 5%),transparent 28%); pointer-events:none; }
.ec-narrative .ec-table .ec-stars i { background:#e9d3ad; }
.ec-narrative .ec-table__inner { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center; gap:clamp(44px,6vw,96px); width:min(1456px,100%); margin-inline:auto; }
.ec-narrative .ec-table__hint { margin:0 0 48px; color:#e4caa0; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; text-align:center; }
.ec-narrative .ec-arcana-row { display:flex; align-items:flex-end; justify-content:center; gap:clamp(14px,2.2vw,30px); }
.ec-narrative .ec-arcana { --w:clamp(128px,11.5vw,166px); width:var(--w); padding:0; border:0; background:none; color:inherit; text-align:center; cursor:pointer; }
.ec-narrative .ec-arcana__card { position:relative; display:block; aspect-ratio:2/3; overflow:hidden; border:1px solid #c7a670; border-radius:10px; background:linear-gradient(165deg,#4d2b4b,#2d1531 60%,#3a1c3b); box-shadow:0 26px 36px -18px rgb(0 0 0 / 75%),inset 0 0 0 1px rgb(0 0 0 / 35%); transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(0); transition:transform .7s var(--story-ease),box-shadow .7s var(--story-ease),filter .5s; filter:brightness(.74) saturate(.9); }
.ec-narrative .ec-arcana__card::before { content:""; position:absolute; inset:7px; border:1px solid #a98858; border-radius:6px; pointer-events:none; }
.ec-narrative .ec-arcana__card::after { content:""; position:absolute; inset:0; background:radial-gradient(circle,rgb(236 206 159 / 45%) .6px,transparent 1.2px) 0 0/9px 9px; opacity:.5; pointer-events:none; }
.ec-narrative .ec-arcana__card .ec-card-illustration { position:absolute; z-index:1; left:12%; right:12%; top:17%; height:58%; width:76%; color:#e9cf9c; }
.ec-narrative .ec-arcana__num { position:absolute; z-index:1; top:12px; left:0; right:0; font:400 11px/1 var(--story-serif); letter-spacing:.12em; color:#d2b57f; }
.ec-narrative .ec-arcana__name { position:absolute; z-index:1; bottom:14px; left:0; right:0; font:500 clamp(13px,1.15vw,16px)/1.1 var(--story-serif); color:#f4e4c6; }
.ec-narrative .ec-arcana__shine { position:absolute; z-index:2; inset:-40% -60%; background:linear-gradient(115deg,transparent 42%,rgb(255 245 220 / 22%) 50%,transparent 58%); opacity:0; transform:translateX(-30%); transition:opacity .5s,transform 1.1s var(--story-ease); pointer-events:none; }
.ec-narrative .ec-arcana__label { display:block; margin-top:16px; color:#cdb3c5; font-size:12px; line-height:1.45; transition:color .3s; }
.ec-narrative .ec-arcana:hover .ec-arcana__card { filter:brightness(.92) saturate(1); }
.ec-narrative .ec-arcana[aria-selected=true] .ec-arcana__card { filter:none; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-22px) scale(1.07); box-shadow:0 0 0 1px #ead29f,0 0 46px rgb(236 206 159 / 38%),0 40px 48px -22px rgb(0 0 0 / 85%); }
.ec-narrative .ec-arcana[aria-selected=true] .ec-arcana__shine { opacity:1; transform:translateX(30%); }
.ec-narrative .ec-arcana[aria-selected=true] .ec-arcana__label { color:#fff; }
.ec-narrative .ec-arcana:focus-visible { outline-color:var(--story-gold); }
.ec-narrative .ec-note { position:relative; padding:clamp(30px,3.4vw,48px) clamp(26px,3.3vw,50px) clamp(30px,3.2vw,44px); border-radius:5px; background:#fff8ec; color:var(--story-plum); box-shadow:0 36px 56px -30px rgb(0 0 0 / 85%),0 2px 0 #f6ecd8 inset; }
.ec-narrative .ec-note::before { content:""; position:absolute; inset:11px; border:1px solid #dcc7a1; border-radius:3px; pointer-events:none; }
.ec-narrative .ec-note__pin { position:absolute; top:-14px; right:34px; display:grid; place-items:center; width:64px; height:30px; color:#b48c54; }
.ec-narrative .ec-note__pin .rf-ico { width:64px; height:24px; }
.ec-narrative .ec-note__panel { position:relative; }
.ec-narrative .ec-note__panel.is-entering { animation:ec-note-in .6s var(--story-ease); }
@keyframes ec-note-in { from { opacity:0; transform:translateY(14px); } }
.ec-narrative .ec-note__label { display:block; color:#a67d42; font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }
.ec-narrative .ec-note__hook { margin:14px 0 0; color:#7a5f78; font:italic 400 clamp(17px,1.4vw,20px)/1.4 var(--story-serif); }
.ec-narrative .ec-note h3 { max-width:20ch; margin:12px 0 16px; font-size:clamp(28px,2.6vw,38px); line-height:1.12; }
.ec-narrative .ec-note__panel > p:not(.ec-note__hook) { max-width:52ch; margin:0 0 24px; color:#5d4a5c; font-size:15px; }
.ec-narrative .ec-note__prompt { margin:0 0 26px; padding:2px 0 2px 18px; border-left:2px solid #c7a670; }
.ec-narrative .ec-note__prompt span { color:#8b7488; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.ec-narrative .ec-note__prompt p { max-width:38ch; margin:8px 0 0; color:var(--story-plum); font:400 21px/1.4 var(--story-serif); letter-spacing:-.02em; }

/* ─── The cross spread: dealt on arrival, turned as the chapters pass ─── */
.ec-narrative .ec-spread { position:relative; padding-block:124px 110px; background:#fbf1f5; }
.ec-narrative .ec-spread .ec-section-heading { max-width:820px; margin-bottom:56px; }
.ec-narrative .ec-spread .ec-section-heading h2 { max-width:16ch; font-size:clamp(40px,4.3vw,64px); }
.ec-narrative .ec-spread .ec-section-heading h2 + p { max-width:58ch; margin-top:20px; font-size:15px; }
.ec-narrative .ec-spread__layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(48px,6vw,100px); align-items:start; }
.ec-narrative .ec-spread__visual { position:sticky; top:104px; }
.ec-narrative .ec-deck-stage { --card-w:118px; --card-h:184px; --gap:18px; position:relative; isolation:isolate; height:calc(var(--card-h) * 3 + var(--gap) * 2 + 44px); max-width:640px; margin:0 auto; }
.ec-narrative .ec-astro-wheel { position:absolute; z-index:0; top:50%; left:50%; width:min(100%,640px); aspect-ratio:1; translate:-50% -50%; color:#b8935c; opacity:0; scale:.92; transition:opacity 1.4s ease,scale 1.4s var(--story-ease); }
.ec-narrative .ec-deck-stage.is-dealt .ec-astro-wheel { opacity:.6; scale:1; }
.ec-motion-ready .ec-deck-stage.is-dealt .ec-astro-wheel { animation:ec-wheel-spin 160s linear infinite; }
@keyframes ec-wheel-spin { to { rotate:360deg; } }
.ec-narrative .ec-deck-glow { position:absolute; z-index:0; top:50%; left:50%; width:380px; height:380px; translate:-50% -50%; background:radial-gradient(circle,rgb(236 206 159 / 60%),rgb(236 206 159 / 0) 62%); opacity:0; transition:opacity 1.2s; }
.ec-narrative .ec-deck-stage.is-dealt .ec-deck-glow { opacity:.75; }
.ec-motion-ready .ec-deck-stage.is-dealt .ec-deck-glow { animation:ec-breathe 7s ease-in-out infinite; }
@keyframes ec-breathe { 0%,100% { opacity:.55; } 50% { opacity:.9; } }
.ec-narrative .ec-deck-slot { position:absolute; z-index:0; top:50%; left:50%; width:calc(var(--card-w) + 16px); height:calc(var(--card-h) + 16px); border:1px dashed rgb(167 125 66 / 55%); border-radius:12px; transform:translate(calc(-50% + var(--dx) * (var(--card-w) + var(--gap))),calc(-50% + var(--dy) * (var(--card-h) + var(--gap)))); opacity:0; transition:opacity .9s ease .3s,border-color .4s,box-shadow .5s; }
.ec-narrative .ec-deck-stage.is-dealt .ec-deck-slot { opacity:1; }
.ec-narrative .ec-deck-slot.is-active { border-style:solid; border-color:#c7a670; box-shadow:0 0 0 7px rgb(236 206 159 / 28%); }
.ec-narrative .ec-reading-deck { position:absolute; inset:0; z-index:1; perspective:1500px; }
.ec-narrative .ec-tarot-card { position:absolute; z-index:2; top:50%; left:50%; width:var(--card-w); height:var(--card-h); padding:0; border:0; border-radius:9px; background:none; color:var(--story-gold); cursor:pointer; transform-style:preserve-3d; transform:translate(calc(-50% + var(--dx) * (var(--card-w) + var(--gap))),calc(-50% + var(--dy) * (var(--card-h) + var(--gap)))) rotate(var(--tilt,0deg)); transition:transform .85s var(--story-ease); }
.ec-narrative .ec-deck-stage:not(.is-dealt) .ec-tarot-card { transform:translate(calc(-50% + var(--card-index) * 1.5px),calc(-50% - var(--card-index) * 1.5px)) rotate(calc(var(--card-index) * 2deg - 4deg)); }
.ec-narrative .ec-deck-stage.is-dealt:not(.is-settled) .ec-tarot-card { transition-delay:calc(var(--card-index) * 120ms); }
.ec-narrative .ec-tarot-card.is-active { z-index:6; transform:translate(calc(-50% + var(--dx) * (var(--card-w) + var(--gap))),calc(-50% + var(--dy) * (var(--card-h) + var(--gap)) - 10px)) rotate(0deg) scale(1.08); }
.ec-narrative .ec-tarot-card__back,.ec-narrative .ec-tarot-card__front { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; border:1px solid #b89a6d; border-radius:9px; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 16px 24px -12px rgb(18 6 22 / 50%); transition:transform .8s var(--story-ease),box-shadow .5s; }
.ec-narrative .ec-tarot-card__back { background:radial-gradient(circle,rgb(236 206 159 / 55%) .7px,transparent 1.3px) 0 0/9px 9px,linear-gradient(160deg,#4b2949,#321a36); color:#e8cd9c; transform:rotateY(0deg); }
.ec-narrative .ec-tarot-card__back::before { content:""; position:absolute; inset:7px; border:1px solid rgb(236 206 159 / 60%); border-radius:5px; }
.ec-narrative .ec-tarot-card__back::after { content:""; position:absolute; inset:36% 24%; border:1px solid rgb(236 206 159 / 50%); border-radius:50%; }
.ec-narrative .ec-tarot-card__back > svg { position:relative; z-index:1; width:38%; height:auto; }
.ec-narrative .ec-tarot-card__front { display:grid; grid-template-rows:12px minmax(0,1fr) auto; justify-items:center; align-items:center; gap:6px; padding:14px 12px 16px; background:#fff8ec; color:var(--story-plum); transform:rotateY(180deg); }
.ec-narrative .ec-tarot-card__front::before { content:""; position:absolute; inset:7px; border:1px solid #d6c19a; border-radius:4px; pointer-events:none; }
.ec-narrative .ec-tarot-card__numeral { position:relative; font:400 11px/1 var(--story-serif); letter-spacing:.1em; color:#906c43; }
.ec-narrative .ec-tarot-card__front > .ec-card-illustration { position:relative; width:86%; height:100%; min-height:0; margin:0; color:#603254; }
.ec-narrative .ec-tarot-card__title { position:relative; font:500 18px/1.1 var(--story-serif); letter-spacing:-.02em; }
.ec-narrative .ec-tarot-card.is-revealed .ec-tarot-card__back { transform:rotateY(-180deg); }
.ec-narrative .ec-tarot-card.is-revealed .ec-tarot-card__front { transform:rotateY(0deg); }
.ec-narrative .ec-tarot-card.is-active .ec-tarot-card__front,.ec-narrative .ec-tarot-card.is-active .ec-tarot-card__back { box-shadow:0 0 0 1px #d8b982,0 0 36px rgb(236 206 159 / 60%),0 24px 32px -14px rgb(18 6 22 / 55%); }
.ec-narrative .ec-tarot-card:hover { z-index:5; }
.ec-narrative .ec-tarot-card:not(.is-active):hover { transform:translate(calc(-50% + var(--dx) * (var(--card-w) + var(--gap))),calc(-50% + var(--dy) * (var(--card-h) + var(--gap)) - 6px)) rotate(var(--tilt,0deg)); }
.ec-narrative .ec-tarot-card:focus-visible { z-index:7; outline:3px solid var(--story-pink); outline-offset:7px; }
.ec-narrative .ec-deck-status { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; max-width:520px; margin:8px auto 0; padding-top:18px; border-top:1px solid #e3cfdb; }
.ec-narrative .ec-deck-status__num { min-width:34px; color:#a67d42; font:400 28px/1 var(--story-serif); }
.ec-narrative .ec-deck-status__text { display:grid; gap:3px; min-width:0; }
.ec-narrative .ec-deck-status__text b { color:var(--story-plum); font:500 17px/1.2 var(--story-serif); letter-spacing:-.02em; }
.ec-narrative .ec-deck-status__text small { color:var(--story-muted); font-size:11px; }
.ec-narrative .ec-deck-dots { display:flex; gap:6px; }
.ec-narrative .ec-deck-dots i { display:block; width:18px; height:3px; border-radius:2px; background:#dcc8d4; transition:background-color .4s,transform .4s; }
.ec-narrative .ec-deck-dots i.is-on { background:#c7a670; }
.ec-narrative .ec-deck-dots i.is-active { background:var(--story-pink); transform:scaleY(1.6); }
.ec-narrative .ec-deck-instruction { max-width:520px; margin:12px auto 0; color:var(--story-muted); font-size:11px; text-align:center; }
.ec-narrative .ec-deck-instruction__mobile { display:none; }
.ec-narrative .ec-chapters { padding-top:4px; }
.ec-narrative .ec-chapter { display:grid; grid-template-columns:58px minmax(0,1fr); gap:26px; align-content:center; min-height:300px; padding:46px 0; border-bottom:1px solid var(--story-line); }
.ec-narrative .ec-chapter:first-child { border-top:1px solid var(--story-line); }
.ec-narrative .ec-chapter__card { position:relative; display:block; width:54px; height:84px; margin-top:4px; border:1px solid #d6c19a; border-radius:5px; background:#fff8ec; color:#603254; box-shadow:0 10px 16px -9px rgb(18 6 22 / 40%); transition:transform .5s var(--story-ease),box-shadow .5s,opacity .4s; opacity:.6; }
.ec-narrative .ec-chapter__card::before { content:""; position:absolute; inset:3px; border:1px solid #e3d3b3; border-radius:3px; }
.ec-narrative .ec-chapter__card i { position:absolute; top:5px; left:0; right:0; font:400 7px/1 var(--story-serif); font-style:normal; letter-spacing:.1em; text-align:center; color:#906c43; }
.ec-narrative .ec-chapter__card svg { position:absolute; left:7px; right:7px; top:16px; bottom:7px; width:auto; height:auto; }
.ec-narrative .ec-chapter__name { color:var(--story-pink); font-size:11px; font-weight:500; }
.ec-narrative .ec-chapter h3 { margin:17px 0; color:var(--story-plum); font-size:clamp(30px,3vw,43px); line-height:1.15; }
.ec-narrative .ec-chapter p { max-width:44ch; margin:0; color:var(--story-muted); font-size:15px; line-height:1.75; }
.ec-narrative .ec-chapter.is-active { border-bottom-color:#c7799f; }
.ec-narrative .ec-chapter.is-active .ec-chapter__card { opacity:1; transform:translateY(-4px) rotate(-5deg); box-shadow:0 0 0 1px #d8b982,0 0 18px rgb(236 206 159 / 70%),0 14px 18px -8px rgb(18 6 22 / 45%); }

/* ─── Small lights elsewhere ─── */
.ec-narrative .ec-meet__halo { position:absolute; z-index:-1; left:34%; top:16%; width:460px; height:460px; translate:-50% 0; border-radius:50%; background:radial-gradient(circle,rgb(236 206 159 / 55%),rgb(236 206 159 / 0) 64%); opacity:.6; pointer-events:none; }
.ec-motion-ready .ec-meet__halo { animation:ec-breathe 9s ease-in-out infinite; }
.ec-reveal-armed .ec-steps::before { transform-origin:left center; scale:1 1; transition:scale 1.6s var(--story-ease) .25s; }
.ec-reveal-armed .ec-steps:not(.is-in)::before { scale:0 1; }
.ec-narrative .ec-questions { background:#f8f2f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='720' viewBox='0 0 960 720' fill='none' stroke='%23c7a670' stroke-width='.7'%3E%3Cg opacity='.28'%3E%3Ccircle cx='96' cy='118' r='1.8' fill='%23c7a670' stroke='none'/%3E%3Ccircle cx='168' cy='74' r='1.2' fill='%23c7a670' stroke='none'/%3E%3Ccircle cx='142' cy='190' r='1.4' fill='%23c7a670' stroke='none'/%3E%3Cpath d='M96 118l72-44M96 118l46 72'/%3E%3Ccircle cx='612' cy='96' r='1.6' fill='%23c7a670' stroke='none'/%3E%3Ccircle cx='680' cy='140' r='1.1' fill='%23c7a670' stroke='none'/%3E%3Ccircle cx='742' cy='92' r='1.4' fill='%23c7a670' stroke='none'/%3E%3Cpath d='M612 96l68 44 62-48'/%3E%3Ccircle cx='420' cy='402' r='1.7' fill='%23c7a670' stroke='none'/%3E%3Ccircle cx='476' cy='352' r='1.1' fill='%23c7a670' stroke='none'/%3E%3Ccircle cx='392' cy='486' r='1.3' fill='%23c7a670' stroke='none'/%3E%3Ccircle cx='350' cy='390' r='1' fill='%23c7a670' stroke='none'/%3E%3Cpath d='M420 402l56-50M420 402l-28 84M420 402l-70-12'/%3E%3Ccircle cx='840' cy='560' r='1.6' fill='%23c7a670' stroke='none'/%3E%3Ccircle cx='888' cy='612' r='1.1' fill='%23c7a670' stroke='none'/%3E%3Ccircle cx='796' cy='640' r='1.3' fill='%23c7a670' stroke='none'/%3E%3Cpath d='M840 560l48 52M840 560l-44 80'/%3E%3Ccircle cx='250' cy='620' r='1' fill='%23c7a670' stroke='none'/%3E%3Ccircle cx='560' cy='640' r='.9' fill='%23c7a670' stroke='none'/%3E%3Ccircle cx='700' cy='300' r='.9' fill='%23c7a670' stroke='none'/%3E%3Ccircle cx='40' cy='420' r='.8' fill='%23c7a670' stroke='none'/%3E%3C/g%3E%3C/svg%3E") 0 0/960px 720px; }

/* ─── Responsive ─── */
@media (min-width:801px) and (max-height:820px) {
  .ec-narrative .ec-spread__visual { top:96px; }
  .ec-narrative .ec-deck-stage { --card-w:100px; --card-h:156px; --gap:14px; }
  .ec-narrative .ec-tarot-card__title { font-size:16px; }
  .ec-narrative .ec-deck-status { margin-top:4px; padding-top:12px; }
  .ec-narrative .ec-deck-instruction { margin-top:8px; }
}
@media (max-width:1100px) {
  .ec-story-page .ec-reading-ribbon { gap:24px; }
  .ec-story-page .ec-reading-ribbon__copy > span { font-size:22px; }
  .ec-ribbon-deck { width:360px; height:136px; }
  .ec-ribbon-card { width:68px; height:104px; }
  .ec-ribbon-deck.is-in .ec-ribbon-card { --rx:calc((var(--i) - 2) * 70px); }
  .ec-narrative .ec-table__inner { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:40px; }
  .ec-narrative .ec-arcana { --w:clamp(104px,12vw,130px); }
  .ec-narrative .ec-spread__layout { gap:44px; }
  .ec-narrative .ec-deck-stage { --card-w:104px; --card-h:162px; --gap:14px; }
  .ec-narrative .ec-tarot-card__title { font-size:16px; }
  .ec-narrative .ec-chapter { grid-template-columns:50px minmax(0,1fr); gap:18px; }
}
@media (max-width:800px) {
  .ec-story-page .ec-hero__inner { padding-bottom:70px; }
  .ec-story-page .ec-hero__scroll { bottom:33px; }
  .ec-story-page .ec-reading-ribbon { flex-direction:column; align-items:stretch; gap:8px; padding:34px 30px 30px; }
  .ec-story-page .ec-reading-ribbon__copy { max-width:none; }
  .ec-ribbon-deck { width:100%; max-width:420px; height:150px; margin:10px auto 0; }
  .ec-narrative .ec-situations { padding-block:88px 0; }
  .ec-narrative .ec-table { padding:60px 30px 70px; background-position:30% 55%; }
  .ec-narrative .ec-table__inner { grid-template-columns:1fr; gap:40px; }
  .ec-narrative .ec-arcana { --w:clamp(112px,20vw,150px); }
  .ec-narrative .ec-note { padding:34px 30px; }
  .ec-narrative .ec-spread { padding-block:88px; }
  .ec-narrative .ec-spread__layout { grid-template-columns:1fr; gap:40px; }
  .ec-narrative .ec-spread__visual { position:static; }
  .ec-narrative .ec-spread .ec-section-heading { margin-bottom:40px; }
  .ec-narrative .ec-spread .ec-section-heading h2 { max-width:20ch; font-size:47px; }
  .ec-narrative .ec-deck-stage { --card-w:98px; --card-h:153px; --gap:14px; max-width:560px; }
  .ec-narrative .ec-deck-instruction__desk { display:none; }
  .ec-narrative .ec-deck-instruction__mobile { display:inline; }
  .ec-narrative .ec-chapters { padding-top:0; }
  .ec-narrative .ec-chapter { min-height:0; grid-template-columns:54px minmax(0,1fr); gap:20px; padding-block:36px; }
  .ec-narrative .ec-chapter h3 { max-width:24ch; font-size:36px; }
  .ec-narrative .ec-chapter p { max-width:62ch; }
  .ec-narrative .ec-meet__halo { left:50%; top:6%; width:380px; height:380px; }
}
@media (max-width:600px) {
  .ec-story-page .ec-hero__inner { padding-bottom:82px; }
  .ec-story-page .ec-hero__scroll { bottom:34px; }
  .ec-story-page .ec-reading-ribbon { padding:30px 24px 26px; }
  .ec-story-page .ec-reading-ribbon__copy > span { max-width:none; font-size:23px; }
  .ec-ribbon-deck { height:128px; }
  .ec-ribbon-card { width:58px; height:90px; }
  .ec-ribbon-deck.is-in .ec-ribbon-card { --rx:calc((var(--i) - 2) * 62px); }
  .ec-ribbon-card__front b { font-size:9px; }
  .ec-ribbon-card__front i { font-size:7px; }
  .ec-narrative .ec-situations { padding-block:71px 0; }
  .ec-narrative .ec-table { padding:52px 24px 60px; }
  .ec-narrative .ec-table__hint { margin-bottom:22px; font-size:10px; }
  .ec-narrative .ec-arcana-row { gap:12px; }
  .ec-narrative .ec-arcana { --w:clamp(88px,27vw,110px); }
  .ec-narrative .ec-arcana__card { border-radius:7px; }
  .ec-narrative .ec-arcana__card::before { inset:5px; border-radius:4px; }
  .ec-narrative .ec-arcana__num { top:8px; font-size:9px; }
  .ec-narrative .ec-arcana__name { bottom:9px; font-size:11px; }
  .ec-narrative .ec-arcana__label { margin-top:12px; font-size:10px; }
  .ec-narrative .ec-arcana[aria-selected=true] .ec-arcana__card { transform:translateY(-12px) scale(1.06); }
  .ec-narrative .ec-note { padding:30px 22px 26px; }
  .ec-narrative .ec-note::before { inset:8px; }
  .ec-narrative .ec-note__pin { right:22px; }
  .ec-narrative .ec-note h3 { font-size:28px; }
  .ec-narrative .ec-note__panel > p:not(.ec-note__hook) { font-size:14px; }
  .ec-narrative .ec-note__prompt p { font-size:19px; }
  .rf-body .ec-narrative .ec-situation-cta { width:100%; padding-inline:14px; font-size:14px; }
  .ec-narrative .ec-spread { padding-block:73px; }
  .ec-narrative .ec-spread__layout { gap:30px; }
  .ec-narrative .ec-spread .ec-section-heading h2 { max-width:18ch; font-size:39px; }
  .ec-narrative .ec-spread .ec-section-heading h2 + p { margin-top:18px; font-size:14px; }
  .ec-narrative .ec-deck-stage { --card-w:84px; --card-h:131px; --gap:10px; }
  .ec-narrative .ec-tarot-card,.ec-narrative .ec-tarot-card__back,.ec-narrative .ec-tarot-card__front { border-radius:7px; }
  .ec-narrative .ec-tarot-card__front { gap:4px; padding:11px 9px 12px; }
  .ec-narrative .ec-tarot-card__numeral { font-size:9px; }
  .ec-narrative .ec-tarot-card__title { font-size:14px; }
  .ec-narrative .ec-deck-slot { width:calc(var(--card-w) + 12px); height:calc(var(--card-h) + 12px); border-radius:10px; }
  .ec-narrative .ec-deck-glow { width:260px; height:260px; }
  .ec-narrative .ec-deck-status { gap:12px; }
  .ec-narrative .ec-deck-status__num { font-size:24px; }
  .ec-narrative .ec-deck-status__text b { font-size:16px; }
  .ec-narrative .ec-deck-dots i { width:14px; }
  .ec-narrative .ec-chapter { grid-template-columns:46px minmax(0,1fr); gap:16px; padding-block:31px; }
  .ec-narrative .ec-chapter__card { width:44px; height:68px; }
  .ec-narrative .ec-chapter__card svg { left:5px; right:5px; top:13px; bottom:6px; }
  .ec-narrative .ec-chapter__card i { top:4px; font-size:6px; }
  .ec-narrative .ec-chapter__name { font-size:10px; }
  .ec-narrative .ec-chapter h3 { margin:13px 0 15px; font-size:29px; }
  .ec-narrative .ec-chapter p { font-size:14px; }
}
@media (max-width:359px) {
  .ec-narrative .ec-arcana { --w:80px; }
  .ec-narrative .ec-deck-stage { --card-w:76px; --card-h:118px; --gap:8px; }
  .ec-ribbon-card { width:52px; height:80px; }
  .ec-ribbon-deck.is-in .ec-ribbon-card { --rx:calc((var(--i) - 2) * 56px); }
}
@media (prefers-reduced-motion:reduce) {
  .ec-reveal-armed [data-reveal] { opacity:1; translate:none; }
  .ec-reveal-armed .ec-steps:not(.is-in)::before { scale:1 1; }
  .ec-stars { display:none; }
  .ec-narrative .ec-astro-wheel,.ec-narrative .ec-deck-glow { opacity:.6; scale:1; }
  .ec-narrative .ec-deck-slot { opacity:1; }
}

@media (prefers-reduced-motion:reduce) {
  .ec-story-page *,.ec-story-page *::before,.ec-story-page *::after,
  .ec-narrative *,.ec-narrative *::before,.ec-narrative *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* Start transitions only after the initial layout has painted. */
.ec-story-page:not(.ec-motion-ready) *,
.ec-story-page:not(.ec-motion-ready) *::before,
.ec-story-page:not(.ec-motion-ready) *::after { transition:none!important; }

/* ─── The invitation: your five cards, waiting above a personal reading ticket. ─── */
.ec-narrative .ec-invitation {
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:105px 86px; background:#28132e; color:#fff;
}
.ec-narrative .ec-invitation::before {
  content:""; position:absolute; z-index:-2; inset:0;
  background:url('../img/brand/elena-tabletop-v2.webp') 28% 47% / 170% auto;
  opacity:.3; pointer-events:none;
}
.ec-narrative .ec-invitation__orbits {
  position:absolute; z-index:-1; top:58px; left:50%; width:min(1160px,125vw);
  aspect-ratio:1; transform:translateX(-50%); pointer-events:none;
}
.ec-narrative .ec-invitation__orbits .ec-astro-wheel {
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  translate:none; scale:1; color:#b99765; opacity:.2; animation:none; transition:none;
}
.ec-narrative .ec-invitation__inner { position:relative; }
.ec-narrative .ec-invitation__copy { max-width:1040px; margin:0 auto; text-align:center; }
.ec-narrative .ec-invitation h2 {
  max-width:1000px; margin:0 auto 24px; color:#fff8ec;
  font:500 clamp(47px,5vw,72px)/1.08 var(--story-serif); letter-spacing:-.045em;
  text-wrap:balance;
}
.ec-narrative .ec-invitation__copy > p {
  max-width:660px; margin:0 auto; color:#e6d8e1; font-size:16px; line-height:1.75;
}
.ec-narrative .ec-invitation__offer {
  position:relative; max-width:1060px; margin:41px auto 0;
  opacity:1; translate:none;
}
/* The ticket and its action are readable before JavaScript or any reveal. */
.ec-reveal-armed .ec-invitation__offer[data-reveal] { opacity:1; translate:none; }
.ec-narrative .ec-invitation__fan {
  --fan-step:115px; --fan-angle:8deg;
  position:relative; z-index:2; height:253px; margin:0 auto;
  pointer-events:none;
}
.ec-narrative .ec-invitation-card {
  --fan-drop:18px;
  position:absolute; left:50%; bottom:10px; display:grid;
  grid-template-rows:12px minmax(0,1fr) 20px; justify-items:center; gap:9px;
  width:145px; height:224px; padding:15px 13px 30px;
  border:1px solid #c2a479; border-radius:8px; background:#fff8ec; color:#28132e;
  box-shadow:0 3px 0 #dbcbb4,0 20px 29px -12px rgb(14 5 18 / 54%);
  transform-origin:50% 92%;
  transform:translateX(calc(-50% + (var(--i) - 2) * var(--fan-step))) translateY(var(--fan-drop)) rotate(calc((var(--i) - 2) * var(--fan-angle)));
}
.ec-narrative .ec-invitation-card::before {
  content:""; position:absolute; inset:7px; border:1px solid #ccb38e; border-radius:4px;
  pointer-events:none;
}
.ec-narrative .ec-invitation-card:nth-child(2),
.ec-narrative .ec-invitation-card:nth-child(4) { --fan-drop:5px; z-index:2; }
.ec-narrative .ec-invitation-card:nth-child(3) { --fan-drop:-6px; z-index:3; }
.ec-narrative .ec-invitation-card__numeral { position:relative; color:#957348; font:400 11px/1 var(--story-serif); }
.ec-narrative .ec-invitation-card > .ec-card-illustration {
  position:relative; width:100%; height:100%; min-height:0; color:#603254;
}
.ec-narrative .ec-invitation-card__name {
  position:relative; align-self:center; color:#392238;
  font:500 17px/1.15 var(--story-serif); letter-spacing:-.02em;
}
.ec-narrative .ec-invitation__ticket {
  position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between;
  gap:30px; margin-top:-18px; padding:35px 39px 33px;
  border:1px solid #eedeca; border-bottom:3px solid #d9c0a5; border-radius:10px;
  background:#fff8ec; color:#28132e;
  box-shadow:0 24px 42px -19px rgb(12 4 15 / 56%);
}
.ec-narrative .ec-invitation__ticket::after {
  content:""; position:absolute; z-index:-1; left:9px; right:9px; bottom:-8px;
  height:7px; border:1px solid #c4aa8a; border-top:0; border-radius:0 0 7px 7px;
  background:#decaaf; pointer-events:none;
}
.ec-narrative .ec-invitation__host { display:flex; align-items:center; gap:18px; min-width:0; }
.ec-narrative .ec-invitation__host > img {
  flex:none; width:68px; height:68px; border:2px solid #fff; border-radius:50%;
  outline:1px solid #dbc6b1; object-fit:cover; object-position:50% 25%;
}
.ec-narrative .ec-invitation__host > div { min-width:0; }
.ec-narrative .ec-invitation__host p {
  max-width:26ch; margin:0 0 7px; color:#28132e;
  font:500 23px/1.22 var(--story-serif); letter-spacing:-.025em;
}
.ec-narrative .ec-invitation__host span { display:block; color:#766272; font-size:12px; line-height:1.55; }
.ec-narrative .ec-invitation__action { flex:0 0 330px; min-width:0; text-align:center; }
.rf-body .ec-narrative .ec-invitation .ec-final-cta {
  display:flex; width:100%; min-height:59px; padding:18px 21px; gap:12px;
  background-color:#cf086b; background-image:none; color:#fff;
  font-size:15px; line-height:1.35; border-radius:4px;
  box-shadow:0 3px 0 #9d084f; transition:transform .2s;
}
.rf-body .ec-narrative .ec-invitation .ec-final-cta:hover { background-color:#b2075c; box-shadow:0 3px 0 #8c0645; }
.rf-body .ec-narrative .ec-invitation .ec-final-cta:active { transform:translateY(2px); box-shadow:0 1px 0 #9d084f; }
.ec-narrative .ec-invitation__action > span { display:block; margin-top:11px; color:#766272; font-size:10px; line-height:1.5; }
.ec-narrative .ec-invitation__next { max-width:760px; margin:29px auto 0; color:#d8c6d3; font-size:12px; line-height:1.65; text-align:center; }
.ec-narrative .ec-invitation__ticket :focus-visible { outline-color:#cf086b; outline-offset:6px; }
.ec-narrative .ec-invitation__copy :focus-visible { outline-color:#ecce9f; }

@media (prefers-reduced-motion:no-preference) {
  .ec-motion-ready .ec-invitation__offer.is-in .ec-invitation-card {
    animation:ec-invitation-open 1.05s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes ec-invitation-open {
    from { transform:translateX(calc(-50% + (var(--i) - 2) * var(--fan-step) * .73)) translateY(calc(var(--fan-drop) + 7px)) rotate(calc((var(--i) - 2) * var(--fan-angle) * .68)); }
    to { transform:translateX(calc(-50% + (var(--i) - 2) * var(--fan-step))) translateY(var(--fan-drop)) rotate(calc((var(--i) - 2) * var(--fan-angle))); }
  }
}
@media (max-width:1100px) {
  .ec-narrative .ec-invitation { padding-block:94px 78px; }
  .ec-narrative .ec-invitation__ticket { gap:24px; padding-inline:27px; }
  .ec-narrative .ec-invitation__host { gap:15px; }
  .ec-narrative .ec-invitation__host p { font-size:21px; }
  .ec-narrative .ec-invitation__action { flex-basis:305px; }
}
@media (max-width:800px) {
  .ec-narrative .ec-invitation { padding-block:85px 73px; }
  .ec-narrative .ec-invitation h2 { max-width:18ch; font-size:clamp(42px,6.8vw,55px); }
  .ec-narrative .ec-invitation__copy > p { max-width:53ch; font-size:15px; }
  .ec-narrative .ec-invitation__fan { --fan-step:94px; height:228px; }
  .ec-narrative .ec-invitation-card { width:128px; height:205px; padding:14px 12px 29px; }
  .ec-narrative .ec-invitation-card__name { font-size:16px; }
  .ec-narrative .ec-invitation__ticket { flex-direction:column; gap:25px; padding:35px 30px 30px; }
  .ec-narrative .ec-invitation__host { gap:17px; }
  .ec-narrative .ec-invitation__host p { max-width:none; font-size:23px; }
  .ec-narrative .ec-invitation__action { flex:0 1 auto; width:100%; max-width:410px; }
  .ec-narrative .ec-invitation__next { max-width:54ch; font-size:11px; }
}
@media (max-width:600px) {
  .ec-narrative .ec-invitation { padding-block:69px 62px; }
  .ec-narrative .ec-invitation::before { background-position:25% 50%; background-size:auto 130%; opacity:.25; }
  .ec-narrative .ec-invitation__inner { padding-inline:21px; }
  .ec-narrative .ec-invitation__orbits { top:108px; width:680px; }
  .ec-narrative .ec-invitation__orbits .ec-astro-wheel { opacity:.16; }
  .ec-narrative .ec-invitation h2 { max-width:17ch; margin-bottom:21px; font-size:clamp(36px,10.6vw,43px); line-height:1.1; }
  .ec-narrative .ec-invitation__copy > p { max-width:42ch; font-size:14px; line-height:1.7; }
  .ec-narrative .ec-invitation__offer { margin-top:29px; }
  .ec-narrative .ec-invitation__fan { --fan-step:51px; --fan-angle:8deg; height:151px; margin-inline:-10px; }
  .ec-narrative .ec-invitation-card { --fan-drop:11px; bottom:9px; width:82px; height:132px; padding:10px 8px 23px; gap:4px; grid-template-rows:8px minmax(0,1fr) 13px; border-radius:5px; box-shadow:0 2px 0 #dbcbb4,0 12px 18px -8px rgb(14 5 18 / 50%); }
  .ec-narrative .ec-invitation-card::before { inset:4px; border-radius:3px; }
  .ec-narrative .ec-invitation-card:nth-child(2),.ec-narrative .ec-invitation-card:nth-child(4) { --fan-drop:3px; }
  .ec-narrative .ec-invitation-card:nth-child(3) { --fan-drop:-4px; }
  .ec-narrative .ec-invitation-card__numeral { font-size:7px; }
  .ec-narrative .ec-invitation-card__name { font-size:10px; letter-spacing:-.015em; }
  .ec-narrative .ec-invitation__ticket { align-items:stretch; gap:23px; margin-top:-16px; padding:29px 23px 25px; border-radius:8px; }
  .ec-narrative .ec-invitation__ticket::after { left:7px; right:7px; bottom:-7px; height:6px; }
  .ec-narrative .ec-invitation__host { align-items:center; gap:13px; }
  .ec-narrative .ec-invitation__host > img { width:53px; height:53px; }
  .ec-narrative .ec-invitation__host p { margin-bottom:6px; font-size:21px; line-height:1.22; }
  .ec-narrative .ec-invitation__host span { font-size:10px; line-height:1.5; }
  .ec-narrative .ec-invitation__action { max-width:none; }
  .rf-body .ec-narrative .ec-invitation .ec-final-cta { min-height:56px; padding:16px 13px; gap:9px; font-size:14px; }
  .rf-body .ec-narrative .ec-invitation .ec-final-cta .rf-ico { width:18px; height:18px; }
  .ec-narrative .ec-invitation__action > span { margin-top:10px; font-size:9px; }
  .ec-narrative .ec-invitation__next { max-width:37ch; margin-top:25px; font-size:10px; }
}
@media (max-width:359px) {
  .ec-narrative .ec-invitation__inner { padding-inline:18px; }
  .ec-narrative .ec-invitation h2 { font-size:36px; }
  .ec-narrative .ec-invitation__fan { --fan-step:45px; height:144px; }
  .ec-narrative .ec-invitation-card { width:77px; height:126px; }
  .ec-narrative .ec-invitation__ticket { padding-inline:17px; }
  .ec-narrative .ec-invitation__host { gap:11px; }
  .ec-narrative .ec-invitation__host > img { width:47px; height:47px; }
  .ec-narrative .ec-invitation__host p { font-size:19px; }
  .rf-body .ec-narrative .ec-invitation .ec-final-cta { padding-inline:11px; gap:7px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce) {
  .ec-narrative .ec-invitation-card { animation:none!important; }
  .ec-narrative .ec-invitation__offer[data-reveal] { opacity:1; translate:none; }
}

/* Keep the surrounding mobile content within the same narrow viewport. */
@media (max-width:359px) {
  .ec-narrative .ec-meet .rf-btn { max-width:100%; }
  .ec-narrative .ec-meet__halo { width:100%; }
  .ec-narrative .ec-video-grid { margin-inline:-20px; padding-inline:20px; scroll-padding-inline:20px; }
}