/* CardMyCruise atmosphere: people, sea and gold behind and in front of the words.

   Every layer here is decoration. It is aria-hidden with no alt text, it sits in its own box so it never moves the
   layout, and it moves only with transform and opacity. The last block freezes all of it for anyone who asks their
   phone for reduced motion. The pictures come from tools/make-atmosphere.py, the people are cut out with
   tools/make-cutouts.py, and the file is shared by the landing page and the port, line and moment pages.

   The idea: the page is a song. The words are the verse and the cards are the hook. This is everything else, the
   people laughing on deck, the gold anchors drifting like they are on the water, the sunset, the light on the sea. */

/* ---------- boxes and helpers ---------- */
section{overflow-x:clip}
/* a box that holds decoration inside a section */
.layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx{pointer-events:none;user-select:none;-webkit-user-drag:none}
img.fx{display:block}

/* breathing: a slow rise and a slight swell, then back. Different lengths and starts, so nothing moves in step. */
.breathe{transform-origin:50% 100%;animation:breathe 11s ease-in-out infinite alternate;will-change:transform}
.breathe.slow{animation-duration:15s;animation-delay:-4s}
.breathe.quick{animation-duration:8.5s;animation-delay:-2s}
@keyframes breathe{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-9px,0) scale(1.03)}}

/* parallax (Chrome and Safari today, everything else simply stays still): the wrapper drifts against the scroll */
@supports (animation-timeline:view()){
  .par{animation:par linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes par{from{transform:translate3d(0,46px,0)}to{transform:translate3d(0,-46px,0)}}
}

/* a gold anchor sitting behind a heading */
.mark{position:absolute;z-index:-1;width:var(--w,320px);height:auto;opacity:var(--o,.07);pointer-events:none;user-select:none;-webkit-user-drag:none}

/* a gold anchor on the water: it bobs and turns a little, like it is floating */
.anc{position:absolute;width:var(--s,56px);aspect-ratio:451/620;background:url(anchor-gold.webp) center/contain no-repeat;opacity:var(--o,.3);filter:blur(var(--b,0px));animation:bob var(--t,13s) ease-in-out infinite;animation-delay:var(--d,0s);will-change:transform}
@keyframes bob{0%,100%{transform:translate3d(0,14px,0) rotate(var(--r0,-12deg))}50%{transform:translate3d(var(--dx,8px),-22px,0) rotate(var(--r1,10deg))}}

/* light glittering on the water: a small gold star that comes and goes */
.glint{position:absolute;width:var(--s,14px);height:var(--s,14px);opacity:0;animation:twinkle var(--t,6s) ease-in-out infinite;animation-delay:var(--d,0s);will-change:transform,opacity}
.glint::before{content:"\2726";position:absolute;inset:0;font-size:var(--s,14px);line-height:1;color:#ffeec4;text-align:center}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:var(--o,.7);transform:scale(1) rotate(30deg)}}

/* gold dust drifting up. A tile that repeats, moved by exactly one tile so it never jumps. */
.dust{position:absolute;left:0;right:0;top:0;height:calc(100% + 900px);background-repeat:repeat;background-size:600px 900px;animation:dustRise 90s linear infinite;will-change:transform}
.dust.far{background-image:url(dust-far.webp);opacity:.7}
.dust.near{background-image:url(dust-near.webp);opacity:.55;animation-duration:56s}
@keyframes dustRise{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-900px,0)}}

/* ---------- hero: friends on deck, a low sun, light on the sea ---------- */
.hero-layer .orbs{position:absolute;inset:0;background-repeat:no-repeat;mix-blend-mode:screen;opacity:.85;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.55) 40%,#000 66%);mask-image:linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.55) 40%,#000 66%)}
/* ORBS:START (python tools/make-atmosphere.py hero writes this) */
.hero-layer .orbs{background-image:radial-gradient(circle at 94.8% 39.5%,rgba(255,214,140,0.08) 0,rgba(255,214,140,0.07) 15px,transparent 28px),radial-gradient(circle at 9.4% 58.3%,rgba(255,214,140,0.11) 0,rgba(255,214,140,0.09) 23px,transparent 42px),radial-gradient(circle at 43.4% 7.0%,rgba(255,214,140,0.17) 0,rgba(255,214,140,0.14) 7px,transparent 13px),radial-gradient(circle at 82.7% 12.4%,rgba(240,190,110,0.19) 0,rgba(240,190,110,0.15) 6px,transparent 11px),radial-gradient(circle at 94.8% 57.7%,rgba(214,160,80,0.08) 0,rgba(214,160,80,0.06) 24px,transparent 45px),radial-gradient(circle at 4.7% 85.8%,rgba(255,236,190,0.15) 0,rgba(255,236,190,0.12) 12px,transparent 22px),radial-gradient(circle at 11.8% 30.8%,rgba(170,226,232,0.10) 0,rgba(170,226,232,0.08) 23px,transparent 42px),radial-gradient(circle at 57.1% 18.8%,rgba(255,214,140,0.17) 0,rgba(255,214,140,0.14) 24px,transparent 45px),radial-gradient(circle at 56.4% 61.9%,rgba(214,160,80,0.20) 0,rgba(214,160,80,0.16) 6px,transparent 12px),radial-gradient(circle at 77.7% 46.6%,rgba(214,160,80,0.14) 0,rgba(214,160,80,0.11) 19px,transparent 35px),radial-gradient(circle at 79.4% 69.9%,rgba(240,190,110,0.09) 0,rgba(240,190,110,0.07) 12px,transparent 23px),radial-gradient(circle at 52.5% 87.5%,rgba(170,226,232,0.16) 0,rgba(170,226,232,0.12) 14px,transparent 27px),radial-gradient(circle at 98.0% 11.8%,rgba(214,160,80,0.10) 0,rgba(214,160,80,0.08) 25px,transparent 46px),radial-gradient(circle at 15.2% 48.9%,rgba(255,214,140,0.25) 0,rgba(255,214,140,0.20) 15px,transparent 29px),radial-gradient(circle at 76.5% 57.3%,rgba(255,236,190,0.13) 0,rgba(255,236,190,0.11) 6px,transparent 12px),radial-gradient(circle at 59.4% 58.0%,rgba(214,160,80,0.08) 0,rgba(214,160,80,0.07) 16px,transparent 30px),radial-gradient(circle at 94.5% 47.4%,rgba(170,226,232,0.08) 0,rgba(170,226,232,0.07) 7px,transparent 13px),radial-gradient(circle at 64.7% 99.3%,rgba(214,160,80,0.12) 0,rgba(214,160,80,0.10) 14px,transparent 27px),radial-gradient(circle at 88.7% 34.7%,rgba(214,160,80,0.14) 0,rgba(214,160,80,0.11) 17px,transparent 32px),radial-gradient(circle at 49.4% 21.8%,rgba(255,236,190,0.09) 0,rgba(255,236,190,0.08) 8px,transparent 15px),radial-gradient(circle at 39.8% 91.7%,rgba(214,160,80,0.09) 0,rgba(214,160,80,0.07) 12px,transparent 23px),radial-gradient(circle at 40.2% 27.8%,rgba(240,190,110,0.23) 0,rgba(240,190,110,0.18) 19px,transparent 36px),radial-gradient(circle at 27.8% 41.5%,rgba(255,236,190,0.20) 0,rgba(255,236,190,0.16) 23px,transparent 43px),radial-gradient(circle at 95.8% 15.1%,rgba(240,190,110,0.10) 0,rgba(240,190,110,0.08) 17px,transparent 32px),radial-gradient(circle at 1.2% 83.1%,rgba(240,190,110,0.12) 0,rgba(240,190,110,0.10) 12px,transparent 22px),radial-gradient(circle at 14.6% 53.5%,rgba(255,214,140,0.18) 0,rgba(255,214,140,0.14) 4px,transparent 8px),radial-gradient(circle at 69.0% 51.5%,rgba(255,214,140,0.19) 0,rgba(255,214,140,0.16) 8px,transparent 16px),radial-gradient(circle at 45.7% 87.1%,rgba(170,226,232,0.22) 0,rgba(170,226,232,0.18) 6px,transparent 11px),radial-gradient(circle at 39.8% 39.4%,rgba(214,160,80,0.19) 0,rgba(214,160,80,0.15) 18px,transparent 33px),radial-gradient(circle at 19.1% 98.5%,rgba(214,160,80,0.10) 0,rgba(214,160,80,0.08) 6px,transparent 11px),radial-gradient(circle at 60.1% 10.2%,rgba(255,214,140,0.10) 0,rgba(255,214,140,0.08) 15px,transparent 29px),radial-gradient(circle at 94.9% 61.4%,rgba(255,214,140,0.24) 0,rgba(255,214,140,0.19) 7px,transparent 14px),radial-gradient(circle at 14.9% 25.2%,rgba(255,236,190,0.18) 0,rgba(255,236,190,0.15) 17px,transparent 32px),radial-gradient(circle at 12.3% 84.9%,rgba(214,160,80,0.16) 0,rgba(214,160,80,0.13) 20px,transparent 38px),radial-gradient(circle at 8.6% 10.2%,rgba(255,236,190,0.21) 0,rgba(255,236,190,0.17) 14px,transparent 27px),radial-gradient(circle at 82.9% 16.1%,rgba(255,214,140,0.11) 0,rgba(255,214,140,0.09) 20px,transparent 38px),radial-gradient(circle at 36.2% 69.0%,rgba(255,214,140,0.21) 0,rgba(255,214,140,0.17) 22px,transparent 41px),radial-gradient(circle at 97.9% 86.3%,rgba(170,226,232,0.23) 0,rgba(170,226,232,0.18) 14px,transparent 27px),radial-gradient(circle at 36.7% 16.7%,rgba(240,190,110,0.17) 0,rgba(240,190,110,0.14) 22px,transparent 41px),radial-gradient(circle at 33.0% 22.3%,rgba(240,190,110,0.22) 0,rgba(240,190,110,0.18) 22px,transparent 40px),radial-gradient(circle at 74.0% 22.7%,rgba(255,214,140,0.16) 0,rgba(255,214,140,0.13) 18px,transparent 33px),radial-gradient(circle at 99.0% 79.0%,rgba(214,160,80,0.12) 0,rgba(214,160,80,0.10) 4px,transparent 9px),radial-gradient(circle at 95.7% 44.7%,rgba(170,226,232,0.26) 0,rgba(170,226,232,0.21) 25px,transparent 46px),radial-gradient(circle at 8.1% 10.2%,rgba(214,160,80,0.11) 0,rgba(214,160,80,0.09) 17px,transparent 31px),radial-gradient(circle at 48.3% 98.5%,rgba(255,214,140,0.23) 0,rgba(255,214,140,0.18) 11px,transparent 21px),radial-gradient(circle at 90.9% 34.4%,rgba(170,226,232,0.09) 0,rgba(170,226,232,0.07) 20px,transparent 38px),radial-gradient(circle at 91.0% 78.2%,rgba(240,190,110,0.16) 0,rgba(240,190,110,0.13) 8px,transparent 15px),radial-gradient(circle at 43.4% 63.6%,rgba(255,214,140,0.22) 0,rgba(255,214,140,0.18) 10px,transparent 19px),radial-gradient(circle at 46.3% 74.3%,rgba(255,214,140,0.21) 0,rgba(255,214,140,0.17) 18px,transparent 33px),radial-gradient(circle at 99.3% 2.8%,rgba(255,214,140,0.24) 0,rgba(255,214,140,0.19) 9px,transparent 18px),radial-gradient(circle at 61.2% 59.6%,rgba(214,160,80,0.19) 0,rgba(214,160,80,0.16) 9px,transparent 17px),radial-gradient(circle at 15.6% 54.8%,rgba(255,214,140,0.07) 0,rgba(255,214,140,0.06) 16px,transparent 30px),radial-gradient(circle at 52.7% 93.4%,rgba(214,160,80,0.26) 0,rgba(214,160,80,0.21) 7px,transparent 14px),radial-gradient(circle at 82.6% 21.1%,rgba(255,236,190,0.11) 0,rgba(255,236,190,0.09) 11px,transparent 20px),radial-gradient(circle at 24.1% 58.6%,rgba(255,236,190,0.17) 0,rgba(255,236,190,0.14) 22px,transparent 40px),radial-gradient(circle at 6.1% 74.0%,rgba(214,160,80,0.20) 0,rgba(214,160,80,0.16) 8px,transparent 16px),radial-gradient(circle at 42.1% 91.8%,rgba(255,214,140,0.09) 0,rgba(255,214,140,0.08) 22px,transparent 41px),radial-gradient(circle at 52.4% 1.9%,rgba(214,160,80,0.22) 0,rgba(214,160,80,0.17) 9px,transparent 17px),radial-gradient(circle at 0.4% 79.9%,rgba(240,190,110,0.10) 0,rgba(240,190,110,0.08) 25px,transparent 46px),radial-gradient(circle at 55.6% 32.6%,rgba(255,214,140,0.17) 0,rgba(255,214,140,0.14) 8px,transparent 15px),radial-gradient(circle at 78.4% 10.6%,rgba(255,214,140,0.08) 0,rgba(255,214,140,0.06) 20px,transparent 38px),radial-gradient(circle at 27.7% 77.2%,rgba(255,214,140,0.16) 0,rgba(255,214,140,0.12) 11px,transparent 20px),radial-gradient(circle at 76.0% 91.2%,rgba(214,160,80,0.13) 0,rgba(214,160,80,0.11) 4px,transparent 9px),radial-gradient(circle at 60.6% 19.9%,rgba(255,236,190,0.16) 0,rgba(255,236,190,0.12) 22px,transparent 40px)}
/* ORBS:END */
/* a wide low sunset, not a disc: it lies along the bottom edge, below every head */
.hero-layer .sun{position:absolute;left:18%;right:-8%;bottom:-2px;height:62%;background:radial-gradient(ellipse 62% 78% at 68% 100%,rgba(255,158,84,.20),rgba(226,150,72,.10) 44%,transparent 72%)}
.hero-layer .sea{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,transparent 0%,rgba(34,96,124,.10) 58%,rgba(12,44,62,.26) 100%)}
.hero-layer .crowdbox{position:absolute;right:-3%;bottom:-8px;width:min(56vw,800px)}
.hero-layer .crowd{display:block;width:100%;height:auto;opacity:.6;-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)}
.hero-layer::after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;background:linear-gradient(180deg,transparent,rgba(14,12,16,.9))}

/* ---------- the sea band under the hero: a big ship sailing away across deep blue water ---------- */
.seaband{position:relative;height:clamp(220px,29vw,400px);margin-top:-70px;overflow:hidden;pointer-events:none;background:#0a1a2b}
.seaband picture,.seaband img{display:block;position:absolute;inset:0;width:100%;height:100%}
.seaband img{object-fit:cover;object-position:50% 46%;opacity:.9}
/* the hero above and the moments strip below are dark, so the picture fades into both */
.seaband::before{content:"";position:absolute;left:0;right:0;top:0;height:48%;background:linear-gradient(180deg,var(--ink) 0%,rgba(14,12,16,.62) 42%,transparent 100%);z-index:1}
.seaband::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(0deg,var(--ink2) 0%,rgba(21,18,24,.55) 48%,transparent 100%);z-index:1}
.seaband .dust,.seaband .anc,.seaband .glint{z-index:2}

/* ---------- the week goes by in a blink: five days as a reel, Saturday to Friday ---------- */
.week{background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(201,162,75,.10),transparent 70%),radial-gradient(ellipse 50% 40% at 50% 100%,rgba(60,120,150,.12),transparent 70%)}
.reel{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;max-width:1120px;margin:70px auto 0;padding-bottom:44px}
.frame{position:relative;margin:0;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--ink2);box-shadow:0 28px 64px rgba(0,0,0,.62),0 0 0 1px rgba(201,162,75,.3)}
.frame:nth-child(even){transform:translateY(36px)}
.frame img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.frame:hover img{transform:scale(1.07)}
.frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,12,16,0) 40%,rgba(14,12,16,.92) 100%);pointer-events:none}
.frame figcaption{position:absolute;left:14px;right:14px;bottom:15px;z-index:2}
.frame figcaption i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.34em;color:var(--gold);text-transform:uppercase;margin-bottom:5px}
.frame figcaption b{display:block;font-family:var(--serif);font-style:italic;font-weight:500;font-size:22px;line-height:1.12;color:var(--text)}
/* the colour drains out of the week as it goes */
.frame:nth-child(1) img{filter:saturate(1.08)}
.frame:nth-child(3) img{filter:saturate(.94)}
.frame:nth-child(4) img{filter:saturate(.86)}
.weekclose{text-align:center;margin-top:34px}
.weekclose p{font-family:var(--serif);font-style:italic;font-size:clamp(24px,3vw,34px);color:var(--gold-hi);margin-bottom:22px}

/* ---------- how it works: somebody stands behind each step ---------- */
.steps{margin-top:252px}
.peek{position:absolute;bottom:100%;left:0;right:0;margin:0 auto;height:210px;width:auto;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 0 30px rgba(201,162,75,.24))}

/* ---------- no signal: the sun going down over open water behind the words ---------- */
.offscene{position:absolute;inset:0;background:url(scene-offline.webp) center/cover no-repeat;opacity:.34;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 60%,transparent 100%)}
#atsea .layer::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 52% 60% at 50% 48%,rgba(14,12,16,.72),transparent 100%)}
#atsea .board{background:linear-gradient(180deg,rgba(34,27,15,.9),rgba(22,18,13,.92))}

/* ---------- every stop: clear water under the port box ---------- */
.portscene{position:absolute;inset:0;background:url(scene-ports.webp) center/cover no-repeat;opacity:.2;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 66%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 66%,transparent 100%)}

/* ---------- ways people use it: a photo behind every card, two families behind the grid ---------- */
.uses{position:relative;margin-top:236px}
.use{position:relative;overflow:hidden;isolation:isolate}
.use .ub{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;z-index:-1;transition:opacity .6s,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.use::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(95deg,rgba(21,18,24,.93) 0%,rgba(21,18,24,.68) 50%,rgba(21,18,24,.3) 100%)}
.use:hover .ub{opacity:.62;transform:scale(1.06)}
.uses>.fig{position:absolute;bottom:100%;height:clamp(200px,24vw,300px);width:auto;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 0 30px rgba(201,162,75,.22));opacity:.94}
.uses>.fig.l{left:1%}
.uses>.fig.r{right:1%}

/* ---------- the quote: four friends and the last of the light ---------- */
.band{position:relative;overflow:hidden;padding:120px 0 0}
.bandgrid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:30px;align-items:end;max-width:1080px;margin:0 auto;padding:0 24px}
.bandtxt{text-align:left;align-self:center;padding-bottom:110px}
.bandtxt blockquote{margin:0 0 26px;padding:0;max-width:560px;text-shadow:0 2px 20px rgba(14,12,16,.8)}
.chorusbox{position:relative;justify-self:center;width:min(400px,100%);pointer-events:none}
.chorusbox::before{content:"";position:absolute;inset:0;background:radial-gradient(closest-side at 50% 50%,rgba(201,162,75,.2),transparent)}
.chorus{position:relative;display:block;width:100%;height:auto;opacity:.86;-webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent 100%);mask-image:linear-gradient(to bottom,#000 76%,transparent 100%)}

/* ---------- sign up: two parties wait beside the form ---------- */
.signup>.layer{z-index:0}
.signup .sub-h{max-width:500px}
.signup>.flank{position:absolute;bottom:0;height:min(270px,29vw);width:auto;pointer-events:none;user-select:none;-webkit-user-drag:none;z-index:0;filter:drop-shadow(0 0 28px rgba(201,162,75,.2))}
.signup>.flank.l{left:2.5%}
.signup>.flank.r{right:2%}
.signup>.form{position:relative;z-index:1}

/* ---------- the port, line and moment pages ---------- */
.pagebg{position:absolute;top:0;left:0;right:0;height:660px;overflow:hidden;pointer-events:none;z-index:0}
.pagebg .pgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.46}
.pagebg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,12,16,.94) 0%,rgba(14,12,16,.62) 46%,rgba(14,12,16,.28) 100%),linear-gradient(180deg,rgba(14,12,16,.5) 0%,transparent 34%,var(--ink) 100%)}
.pagefig{position:absolute;right:max(2%,calc((100vw - 1120px) / 2));top:96px;height:auto;width:auto;max-width:min(460px,38vw);max-height:min(500px,40vw);pointer-events:none;user-select:none;-webkit-user-drag:none;opacity:.62;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}

/* a gold anchor behind the closing call to action, like the ones behind the landing page headings */
main .cta::before{content:"";position:absolute;left:50%;top:-4px;width:150px;height:206px;margin-left:-75px;background:url(anchor-gold.webp) center/contain no-repeat;opacity:.07;transform:rotate(-8deg);z-index:-1;pointer-events:none}
.pagefig.wide{max-width:min(400px,32vw);max-height:min(330px,28vw)}

/* ---------- smaller screens ---------- */
@media(max-width:1100px){
  .peek{height:180px}
  .uses>.fig{height:210px}
}
@media(max-width:920px){
  .hero-layer .crowdbox{width:104vw;right:-16vw}
  .hero-layer .crowd{opacity:.42}
  /* one step under another: every step needs its own head room */
  .steps{grid-template-columns:1fr;gap:150px 0;margin-top:150px;background:none;border:0}
  .step{border:1px solid var(--line-soft)}
  .peek{height:150px}
  .uses>.fig{display:none}
  .uses{margin-top:40px}
  .signup>.flank{display:none}
  .bandgrid{grid-template-columns:1fr;gap:0}
  .bandtxt{padding-bottom:20px;text-align:center}
  .bandtxt blockquote{margin-left:auto;margin-right:auto}
  .chorusbox{width:min(340px,80%)}
  .band{padding-top:90px}
  .reel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 24px 56px;margin:48px -24px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .reel::-webkit-scrollbar{display:none}
  .frame{flex:0 0 64%;max-width:290px;scroll-snap-align:center}
  .frame:nth-child(even){transform:none}
  img.pagefig{display:none}
  .pagebg{height:520px}
}
@media(max-width:700px){
  .seaband{height:min(78vw,340px);margin-top:0}
}
@media(max-width:600px){
  .hero-layer .sun{left:-10%}
  .anc{opacity:calc(var(--o,.3) * .55)}
  .anc.desk,.glint{display:none}
  .peek{height:130px}
  .steps{gap:130px 0;margin-top:130px}
  .frame{flex-basis:72%}
  .mark{--w:220px!important}
}

/* ---------- reduced motion: keep the pictures, freeze everything ---------- */
@media (prefers-reduced-motion:reduce){
  .breathe,.anc,.dust,.par{animation:none!important}
  .glint{animation:none!important;opacity:.5}
  .frame img,.use .ub{transition:none}
}