/* WEB-18: user-supplied character art, softened into the existing landscape. */
.chronicle,.world,.rates,.start,.closing{position:relative;isolation:isolate;overflow:clip}
.section-art{position:absolute;display:block;pointer-events:none;z-index:-1;width:clamp(230px,25vw,350px);aspect-ratio:1.47;opacity:.78;mask-image:radial-gradient(ellipse 68% 72% at 50% 42%,#000 30%,transparent 76%);-webkit-mask-image:radial-gradient(ellipse 68% 72% at 50% 42%,#000 30%,transparent 76%)}
.section-art img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.65) brightness(.72);border:0}
.chronicle>.section-art{right:3%;top:26px;z-index:0}
.chronicle-heading{position:relative;z-index:1;padding-right:250px;align-items:start}
.chronicle-heading>p{max-width:210px}
.world>.section-art{left:2%;top:255px}
.rates{padding-bottom:220px}
.rates>.section-art{right:3%;bottom:0;width:290px;z-index:0;opacity:.68}
.rates>.rate-heading,.rates>.rate-board{position:relative;z-index:1}
.start>.section-art{left:1%;top:205px;width:260px}
.closing>.section-art{right:6%;top:80px;width:440px;aspect-ratio:1.47;opacity:.85}
.closing-mark{display:none}
@media(max-width:1100px){
 .chronicle-heading{padding-right:190px;display:block}.chronicle-heading>p{max-width:340px;margin-top:20px}
 .chronicle>.section-art{width:235px;top:65px;right:0}
 .world>.section-art{left:0;width:230px;top:290px}
 .start>.section-art{width:190px;left:0;top:260px}
 .closing>.section-art{width:330px;right:2%;top:120px}
}
@media(max-width:850px){
 .world>.section-art{top:20px;left:auto;right:0;width:210px;opacity:.45;z-index:0}
 .world>.section-number,.world>div{position:relative;z-index:1}
 .world>div>.eyebrow,.world>div>h2{max-width:76%}
 .start>.section-art{left:auto;right:0;top:20px;width:210px;opacity:.5;z-index:0}
 .start>h2{position:relative;z-index:1;max-width:72%}
 .rates>.section-art{width:235px;bottom:0}.rates{padding-bottom:170px}
 .closing>.section-art{width:260px;right:0;top:120px;opacity:.55}
}
@media(max-width:700px){
 .chronicle-heading{padding-right:90px}.chronicle-heading h2{font-size:36px}
 .chronicle>.section-art{width:175px;top:56px;right:-22px;opacity:.42}
 .chronicle-heading>p{padding-right:0;max-width:260px}
 .world>.section-art,.start>.section-art{width:175px;right:-25px;opacity:.38}
 .world>div>.eyebrow,.world>div>h2{max-width:85%}
 .rates{padding-bottom:150px}.rates>.section-art{width:200px;opacity:.56}
 .closing>.section-art{width:230px;top:155px;right:-30px;opacity:.4}
}
/* Progressive enhancement: native scroll timeline; no JS loop or scroll interception. */
@supports (animation-timeline:scroll(root block)) and (animation-range:100px 850px){
 @media(min-width:1050px) and (prefers-reduced-motion:no-preference){
  .hero .aden-backdrop{inset:-10% 0;animation:cover-depth linear both;animation-timeline:scroll(root block);animation-range:100px 850px}
  .hero .hero-copy{animation:cover-departure linear both;animation-timeline:scroll(root block);animation-range:100px 850px}
  .hero .hero-shade{animation:cover-night linear both;animation-timeline:scroll(root block);animation-range:100px 850px}
 }
}
@keyframes cover-depth{from{transform:translateY(0) scale(1.015)}to{transform:translateY(80px) scale(1.07)}}
@keyframes cover-departure{from{transform:translateY(0);opacity:1}to{transform:translateY(-38px);opacity:.3}}
@keyframes cover-night{from{opacity:1}to{opacity:.78}}

/* WEB-20: illustration and heading share a real layout column, never an overlay. */
.rates{padding-bottom:115px}
.rates .rate-heading>.section-art,.start .start-heading>.section-art{position:relative;inset:auto;z-index:auto;width:min(100%,340px);margin:35px 0 0;opacity:.78}
.start .start-heading{min-width:0;position:relative}
.start .start-heading>h2{max-width:none}
.start .start-heading>.section-art{width:min(100%,310px);margin-top:28px}
@media(max-width:850px){
 .rates{padding-bottom:70px}
 .rates .rate-heading,.start .start-heading{display:grid;grid-template-columns:minmax(0,1fr) 165px;align-items:center;column-gap:12px}
 .rates .rate-heading>.eyebrow{grid-column:1/3}
 .rates .rate-heading>h2,.start .start-heading>h2{grid-column:1;max-width:none}
 .rates .rate-heading>.section-art,.start .start-heading>.section-art{grid-column:2;grid-row:2;margin:0;width:165px;opacity:.7}
 .start .start-heading>.section-art{grid-row:1}
}
@media(max-width:480px){
 .rates .rate-heading,.start .start-heading{grid-template-columns:minmax(0,1fr) 115px;column-gap:4px}
 .rates .rate-heading>.section-art,.start .start-heading>.section-art{width:115px;opacity:.64}
 .rates .rate-heading>h2,.start .start-heading>h2{font-size:40px}
}

/* WEB-22: complete the section numbering without moving its illustration. */
.rates .rate-heading>.section-number{margin:0 0 25px;grid-column:1/-1}

/* WEB-23: start follows the same left-heading/right-content rhythm as rates. */
.start{grid-template-columns:1fr 1.3fr;gap:12%}
.start .start-heading{display:block}
.start .start-heading>.section-number{margin:0 0 25px}
.start .start-heading>.section-art{width:min(100%,310px);margin:28px 0 0}
@media(max-width:850px){.start{grid-template-columns:1fr;gap:35px}.start .start-heading>.section-art{width:220px}}
@media(max-width:480px){.start .start-heading>.section-art{width:190px}}