/* Signature sections. Each has its own idea; none borrows another's effect.
   1 Window light · 2 The drawing · 3 The sun path · 4 The folio · 5 Posters */

/* ============ 1. Window light (homepage top, optional) ============ */
.hero--window { position: relative; isolation: isolate; background: linear-gradient(180deg, #fbfcfc, #f4f7f6); }
.hero--window > .wrap { position: relative; z-index: 1; }
.wl { position: absolute; inset: -14% -6% -14% -6%; z-index: 0; pointer-events: none; overflow: hidden;
	-webkit-mask-image: radial-gradient(80% 85% at 56% 46%, #000 50%, transparent 88%); mask-image: radial-gradient(80% 85% at 56% 46%, #000 50%, transparent 88%); }
.wl svg { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 60% 40%;
	transform: perspective(1400px) rotateX(16deg) rotateZ(-9deg) skewX(-22deg) scale(1.18); animation: wlSun 46s ease-in-out infinite alternate; }
.wl__shade rect { fill: rgb(32, 58, 55); opacity: .11; }
.wl__warm rect { fill: rgb(255, 214, 120); opacity: .10; mix-blend-mode: multiply; }
.wl__fronds path { fill: rgb(32, 58, 55); opacity: .2; transform-box: view-box; }
.wl__f1 { transform-origin: 1720px -80px; animation: wlSway 9s ease-in-out infinite alternate; }
.wl__f2 { transform-origin: 1640px -140px; animation: wlSway 7s ease-in-out -3s infinite alternate; }
@keyframes wlSway { from { transform: rotate(-1.6deg); } to { transform: rotate(2.2deg); } }
@keyframes wlSun { from { translate: -1.5% 0; } to { translate: 1.5% -1%; } }
@media (max-width: 900px) { .wl { inset: -10% -40% 30% -10%; opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .wl svg, .wl__f1, .wl__f2 { animation: none; } }

/* ============ 2. The drawing (campaign, optional) ============ */
.sheet { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 290px; border: 1px solid rgba(211, 236, 232, .28); border-radius: 4px; overflow: hidden;
	background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)); box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .55); }
.sheet__paper { position: relative; padding: clamp(14px, 2vw, 26px); border-right: 1px solid rgba(211, 236, 232, .22); }
.sheet__paper::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: screen;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sheet__corner { position: absolute; width: 14px; height: 14px; border: 0 solid rgba(255, 208, 40, .7); }
.sheet__corner--tl { left: 8px; top: 8px; border-left-width: 1px; border-top-width: 1px; } .sheet__corner--tr { right: 8px; top: 8px; border-right-width: 1px; border-top-width: 1px; }
.sheet__corner--bl { left: 8px; bottom: 8px; border-left-width: 1px; border-bottom-width: 1px; } .sheet__corner--br { right: 8px; bottom: 8px; border-right-width: 1px; border-bottom-width: 1px; }
.bp { display: block; width: 100%; height: auto; }
.bp-grid { stroke: rgba(255, 255, 255, .045); stroke-width: 1; } .bp-grid5 { stroke: rgba(255, 255, 255, .085); stroke-width: 1; }
.bp-cons path { stroke: rgba(120, 209, 198, .2); stroke-width: .8; fill: none; } .bp-centre { stroke-dasharray: 22 6 3 6; }
.bp-pencil path { stroke: rgba(211, 236, 232, .2); fill: none; stroke-dasharray: 3 3; }
.bp-inked path { stroke: #fff; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bp-inked path.is-in { stroke-dashoffset: 0; }
.sheet.is-drawing .bp-inked path.is-in { stroke-dashoffset: 1; animation: bpInk .5s cubic-bezier(.45, 0, .2, 1) forwards; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes bpInk { to { stroke-dashoffset: 0; } }
.bp-w3 { stroke-width: 3; } .bp-w2 { stroke-width: 1.8; } .bp-w1 { stroke-width: .9; }
.bp-dims path { stroke: #FFD028; stroke-width: .9; fill: none; opacity: .85; } .bp-dims text { fill: #FFD028; font: 600 11px Inter, system-ui, sans-serif; letter-spacing: .14em; }
.sheet__block { display: grid; grid-template-columns: 1fr; align-content: stretch; }
.sheet__cell { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border-bottom: 1px solid rgba(211, 236, 232, .22); color: #fff; }
.sheet__cell:last-child { border-bottom: 0; }
.sheet__cell small { font: 600 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: rgba(211, 236, 232, .65); }
.sheet__cell b { font: 700 17px/1.25 Inter, system-ui, sans-serif; color: #fff; }
.sheet__cell span { font-size: 13.5px; color: rgba(211, 236, 232, .8); }
.sheet__cell span[lang="ar"] { font: 400 19px/1.3 Amiri, serif; color: #FFD028; }
.sheet__cell--ink b { font: 400 54px/1 "Instrument Serif", Georgia, serif; color: #FFD028; }
.sheet__cell--ink b span { font: inherit; color: inherit; }
@media (max-width: 900px) { .sheet { grid-template-columns: 1fr; } .sheet__paper { border-right: 0; border-bottom: 1px solid rgba(211, 236, 232, .22); } .sheet__block { grid-template-columns: 1fr 1fr; } .sheet__cell--wide { grid-column: 1 / -1; } .sheet__cell { border-right: 1px solid rgba(211, 236, 232, .22); } }

/* ============ 3. The sun path (prayer times page) ============ */
.sunpath { margin: 8px 0 0; padding: clamp(22px, 3vw, 36px) clamp(18px, 3vw, 40px) 18px; border-radius: 28px; background: #fff;
	box-shadow: 0 0 0 1px rgba(11, 74, 67, .07), 0 40px 90px -50px rgba(11, 74, 67, .35); position: relative; overflow: hidden; }
.sunpath__head { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.sunpath__next { margin: 0; font: 400 clamp(26px, 3.2vw, 44px)/1.1 "Instrument Serif", Georgia, serif; color: var(--deep); }
.sunpath__next b { font-family: Inter, system-ui, sans-serif; font-weight: 800; font-size: .74em; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sunpath__next em { color: var(--teal); }
.sunpath__clock { margin: 0; text-align: right; font: 700 15px/1.2 Inter, system-ui, sans-serif; color: var(--deep); font-variant-numeric: tabular-nums; }
.sunpath__clock small { display: block; font-weight: 500; font-size: 12.5px; color: var(--muted); }
.sunpath__stage { position: relative; margin-top: 10px; touch-action: pan-y; cursor: ew-resize; outline: none; }
.sunpath__stage:focus-visible { box-shadow: 0 0 0 2px var(--teal); border-radius: 12px; }
.sunpath__stage svg { display: block; width: 100%; height: auto; overflow: visible; }
.sunpath__hint { margin: 6px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.sp-sky { transition: opacity .6s; }
.sp-horizon { stroke: rgba(11, 74, 67, .38); stroke-width: 1; }
.sp-grid { stroke: rgba(11, 74, 67, .07); stroke-width: 1; }
.sp-day { fill: none; stroke: url(#sp-gold); stroke-width: 2.4; stroke-linecap: round; }
.sp-night { fill: none; stroke: rgba(11, 74, 67, .32); stroke-width: 1.4; stroke-dasharray: 2 5; stroke-linecap: round; }
.sp-fillday { fill: url(#sp-dayfill); }
.sp-tick { stroke: rgba(11, 74, 67, .22); stroke-width: 1; }
.sp-hour { font: 500 10.5px Inter, system-ui, sans-serif; fill: rgba(11, 74, 67, .5); letter-spacing: .04em; }
.sp-mark circle { fill: #fff; stroke: var(--deep); stroke-width: 1.6; }
.sp-mark.is-next circle { fill: var(--gold); stroke: var(--deep); }
.sp-mark line { stroke: rgba(11, 74, 67, .3); stroke-width: 1; stroke-dasharray: 2 3; }
.sp-name { font: 700 12px Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; fill: var(--deep); }
.sp-time { font: 600 15px Inter, system-ui, sans-serif; fill: var(--ink); font-variant-numeric: tabular-nums; }
.sp-iq { font: italic 400 13px "Instrument Serif", Georgia, serif; fill: var(--teal-text); }
.sp-mark.is-past .sp-name, .sp-mark.is-past .sp-time { opacity: .45; }
.sp-sun { transition: opacity .3s; }
.sp-scrub line { stroke: var(--deep); stroke-width: 1; stroke-dasharray: 3 3; }
.sp-scrub text { font: 700 12px Inter, system-ui, sans-serif; fill: var(--deep); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .sp-time { font-size: 13px; } .sp-name { font-size: 10.5px; } .sp-iq { display: none; } }

/* ============ 4. The folio (homepage education) ============ */
.folio-sec { position: relative; padding: clamp(80px, 10vw, 140px) 0; overflow: hidden;
	background: radial-gradient(60% 70% at 50% 10%, rgba(255, 208, 40, .10), rgba(255, 208, 40, 0) 70%), linear-gradient(180deg, #E6F4F2, #d5ebe7); }
.book { --gold-a: #8a6a12; --gold-b: #e9c45a; --gold-c: #fff1b8; --ink: #2a2a24; --rule: #0B4A43;
	position: relative; max-width: 1180px; margin: 0 auto; perspective: 2200px; }
.book__cover { position: absolute; inset: -14px -16px -18px; border-radius: 10px; background: linear-gradient(180deg, #0d5148, #093b35);
	box-shadow: inset 0 0 0 1px rgba(255, 208, 40, .35), inset 0 0 0 7px #0b4740, inset 0 0 0 8px rgba(255, 208, 40, .28), 0 50px 90px -40px rgba(4, 30, 27, .65), 0 18px 30px -18px rgba(4, 30, 27, .5); }
.book__pages { position: relative; display: grid; grid-template-columns: 1fr 34px 1fr; transform-style: preserve-3d; }
.leaf { position: relative; background: #fff; padding: clamp(18px, 2.2vw, 30px); min-height: 100%;
	box-shadow: 0 1px 0 #e9eceb, 0 2px 0 #fff, 0 3px 0 #e4e8e7, 0 4px 0 #fff, 0 5px 0 #dfe4e3; /* page block edges */
	transition: transform 1.4s cubic-bezier(.16, 1, .3, 1); }
.leaf--l { border-radius: 6px 0 0 6px; transform-origin: right center; background: linear-gradient(270deg, #e9eeed 0, #fff 7%, #fff 100%); }
.leaf--r { border-radius: 0 6px 6px 0; transform-origin: left center; background: linear-gradient(90deg, #e9eeed 0, #fff 7%, #fff 100%); }
.book.is-armed:not(.is-open) .leaf--l { transform: rotateY(9deg); } .book.is-armed:not(.is-open) .leaf--r { transform: rotateY(-9deg); }
.book__gutter { background: linear-gradient(90deg, #e3e8e7, #f7f9f9 30%, #fdfefe 50%, #f7f9f9 70%, #e3e8e7); box-shadow: inset 0 0 18px rgba(11, 74, 67, .12); }
.leaf::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* The jadwal: fine black contour, the thick "mother" gold line, black contour, a white gap, then the outer coloured line. */
.leaf__frame { position: relative; height: 100%; padding: 26px clamp(18px, 2.4vw, 34px) 30px;
	box-shadow: inset 0 0 0 1.2px var(--ink), 0 0 0 6px #fff, 0 0 0 7.5px var(--rule); }
.leaf__frame::before { content: ""; position: absolute; inset: 2px; padding: 3.5px; pointer-events: none;
	background: linear-gradient(115deg, var(--gold-a) 0%, var(--gold-b) 22%, var(--gold-c) 30%, var(--gold-b) 38%, var(--gold-a) 60%, var(--gold-b) 82%, var(--gold-a) 100%) 0 0 / 300% 300%;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.leaf__frame::after { content: ""; position: absolute; inset: 5.5px; pointer-events: none; box-shadow: 0 0 0 .8px var(--ink); }
.book.is-open .leaf__frame::before { animation: gild 2.4s cubic-bezier(.45, 0, .2, 1) .5s both; }
.leaf:hover .leaf__frame::before { animation: gild 1.8s cubic-bezier(.45, 0, .2, 1) both; }
@keyframes gild { from { background-position: 100% 0; } to { background-position: 0 0; } }
.leaf__band { display: flex; justify-content: center; margin: 0 -6px 22px; padding: 10px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
	background: linear-gradient(90deg, transparent, rgba(233, 196, 90, .16) 20%, rgba(233, 196, 90, .16) 80%, transparent); }
.leaf__cartouche { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 200px; padding: 6px 34px; border-radius: 999px;
	background: var(--rule); color: var(--gold-b); font: 400 22px/1.2 Amiri, "Noto Naskh Arabic", serif;
	box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px var(--gold-b), 0 0 0 4px var(--ink); }
.leaf__cartouche:not([lang]) { font: italic 400 21px/1.2 "Instrument Serif", Georgia, serif; letter-spacing: .01em; }
.leaf__title { margin: 0; font: 800 clamp(30px, 3vw, 46px)/1.04 Inter, system-ui, sans-serif; letter-spacing: -.035em; color: var(--deep); text-align: center; }
.leaf__lede { margin: 14px auto 0; max-width: 40ch; text-align: center; color: #33504C; font-size: 16.5px; line-height: 1.6; }
.leaf__photo { height: clamp(220px, 24vw, 320px); margin: 22px auto 0; max-width: 360px; }
.leaf__count { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 18px 0 0; }
.leaf__count b { font: 400 54px/1 "Instrument Serif", Georgia, serif; color: var(--deep); }
.leaf__count span { font: italic 400 19px "Instrument Serif", Georgia, serif; color: #6b5512; }
.leaf__list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.leaf__list li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; padding: 16px 4px; border-bottom: 1px solid rgba(42, 42, 36, .14); }
.leaf__list li:last-child { border-bottom: 0; }
.leaf__list small { display: block; font: italic 400 18px/1.1 "Instrument Serif", Georgia, serif; color: #6b5512; }
.leaf__list b { display: block; margin-top: 2px; font: 800 clamp(20px, 1.7vw, 25px)/1.15 Inter, system-ui, sans-serif; letter-spacing: -.02em; color: var(--deep); }
.leaf__list em { display: block; margin-top: 4px; font-style: normal; font-weight: 600; color: #33504C; font-variant-numeric: tabular-nums; }
.rosette { width: 40px; height: 40px; }
.rosette__ring { fill: none; stroke: #b28a1e; stroke-width: 1.4; } .rosette__ring--in { stroke-width: .8; stroke: var(--rule); }
.rosette__petals ellipse { fill: #e2bd4f; stroke: #8a6a12; stroke-width: .5; } .rosette__dot { fill: var(--rule); }
.leaf__actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: center; margin-top: 24px; }
.leaf__actions .link-arrow { color: var(--deep); }
.leaf__num { position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); font: 400 16px/1 Amiri, serif; color: #8a6a12; }
.leaf__body > * { transition: opacity .8s ease, transform 1s cubic-bezier(.16, 1, .3, 1); }
.book.is-armed:not(.is-open) .leaf__body > * { opacity: 0; transform: translateY(10px); }
.book.is-open .leaf__body > *:nth-child(2) { transition-delay: .12s; } .book.is-open .leaf__body > *:nth-child(3) { transition-delay: .24s; } .book.is-open .leaf__body > *:nth-child(4) { transition-delay: .36s; }
@media (max-width: 900px) {
	.book__pages { grid-template-columns: 1fr; gap: 18px; }
	.book__gutter { display: none; }
	.book__cover { inset: -10px; }
	.leaf--l, .leaf--r { border-radius: 6px; background: #fff; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) { .leaf, .leaf__body > * { transition: none; } .book .leaf { transform: none !important; } .leaf__frame::before { animation: none !important; } }

/* ============ 5. Posters (events) ============ */
.posters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 32px); }
.poster { perspective: 1200px; }
.poster__card { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: #fff; border-radius: 16px; overflow: hidden; background: #062f2b;
	transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transform-style: preserve-3d; transition: transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .6s;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 30px 60px -36px rgba(4, 30, 27, .7); }
.poster__card:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 50px 90px -40px rgba(4, 30, 27, .8); }
.poster__card:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.poster__art { position: relative; aspect-ratio: 4 / 5; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 22px 20px; }
.poster__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.8s cubic-bezier(.16, 1, .3, 1); filter: saturate(.85) contrast(1.05); }
.poster__card:hover .poster__img { transform: scale(1.1); }
/* Grade: Madina green in the shadows, warm in the light, grain and a vignette, like graded film stills. */
.poster__grade { position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(6, 47, 43, .35) 0%, rgba(6, 47, 43, 0) 26%, rgba(6, 47, 43, .15) 48%, rgba(4, 30, 27, .92) 100%), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .45)); }
.poster__grade::after { content: ""; position: absolute; inset: 0; opacity: .12; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.poster__glare { position: absolute; inset: -40%; pointer-events: none; opacity: 0; transition: opacity .5s; mix-blend-mode: soft-light;
	background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); transform: translate(var(--gx, 0), var(--gy, 0)); }
.poster__card:hover .poster__glare { opacity: .55; }
.poster--type .poster__art { background: radial-gradient(90% 70% at 70% 20%, rgba(255, 208, 40, .22), transparent 60%), linear-gradient(160deg, #0d5148, #062f2b); }
.poster__mono { position: absolute; right: -4%; top: -8%; font: italic 400 clamp(220px, 26vw, 380px)/1 "Instrument Serif", Georgia, serif; color: transparent; -webkit-text-stroke: 1px rgba(255, 208, 40, .35); }
.poster__no { position: absolute; top: 18px; left: 22px; z-index: 1; font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: .22em; color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; }
.poster__tag { position: absolute; top: 14px; right: 16px; z-index: 1; padding: 6px 10px; border-radius: 999px; font: 600 11.5px/1 Inter, system-ui, sans-serif; color: #062f2b; background: rgba(255, 255, 255, .88); }
.poster__date { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.poster__month { font: 600 12px/1 Inter, system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); padding-bottom: 12px; }
.poster__month--rec { padding-bottom: 0; letter-spacing: .12em; }
.poster__day { font: 400 clamp(84px, 8vw, 120px)/.8 "Instrument Serif", Georgia, serif; color: #fff; letter-spacing: -.02em; }
.poster__title { position: relative; z-index: 1; margin: 0; font: 800 clamp(22px, 1.9vw, 28px)/1.1 Inter, system-ui, sans-serif; letter-spacing: -.025em; color: #fff; text-wrap: balance; }
.poster__meta { position: relative; z-index: 1; margin: 8px 0 0; font-size: 13.5px; color: rgba(211, 236, 232, .9); }
/* Ticket stub: perforation with half-moon notches, the action on the stub. */
.poster__stub { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px 20px; background: #fff; color: var(--deep); }
.poster__perf { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: radial-gradient(circle, rgba(11, 74, 67, .35) 1px, transparent 1.6px) 0 0 / 9px 2px repeat-x; }
.poster__stub::before, .poster__stub::after { content: ""; position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--sec-bg, #fff); }
.poster__stub::before { left: -9px; } .poster__stub::after { right: -9px; }
.poster__excerpt { font-size: 13.5px; line-height: 1.45; color: #33504C; }
.poster__cta { flex: none; font: 700 14px/1 Inter, system-ui, sans-serif; color: var(--deep); padding: 11px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--deep); transition: background .3s, color .3s; }
.poster__card:hover .poster__cta { background: var(--deep); color: #fff; }
@media (max-width: 900px) {
	.posters { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 18px; margin: 0 -4px; scrollbar-width: none; }
	.posters::-webkit-scrollbar { display: none; }
	.poster { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .poster__card, .poster__img { transition: none; } }