/* ===== Look-and-feel library for mypakistan.online (2026-10-24) =====
   The portal worker sets <html data-layout data-look data-deco data-motion data-band data-event-tone> and a <style id="mp-look">
   with the preset palette (--lk-*). Presets/layouts are defined in portal/src/themes.js. Motion: css here + js/fx.js. */

:root { --lk-bg: #012A13; --lk-deep: #012A13; --lk-accent: #2FBF71; --lk-accent2: #2FBF71; --lk-ink: #ffffff; --lk-ov: .6; }

/* ---------- shared: palette drives the hero and dark surfaces ---------- */
.hero { background: var(--lk-bg); color: var(--lk-ink); }
.hero::before {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--lk-bg) min(100%, calc(var(--lk-ov) * 100% + 15%)), transparent) 0%,
                            color-mix(in srgb, var(--lk-bg) calc(var(--lk-ov) * 55%), transparent) 45%,
                            color-mix(in srgb, var(--lk-bg) 90%, transparent) 86%, var(--lk-bg) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--lk-bg) min(100%, calc(var(--lk-ov) * 140%)), transparent) 0%,
                           color-mix(in srgb, var(--lk-bg) calc(var(--lk-ov) * 70%), transparent) 50%, transparent 82%);
}
.hero h1 em { color: var(--lk-accent); }
.hero .dot { background: var(--lk-accent2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lk-accent2) 28%, transparent); }
.skyline { color: var(--lk-bg); }
.nav.scrolled { background: color-mix(in srgb, var(--lk-deep) 94%, transparent); }
.daily, .foot { background: var(--lk-deep); }
.daily::after { background: linear-gradient(90deg, var(--lk-deep) 35%, color-mix(in srgb, var(--lk-deep) 60%, transparent) 75%, color-mix(in srgb, var(--lk-deep) 30%, transparent)); }
[data-look]:not([data-look="none"]) .daily .kicker, [data-look]:not([data-look="none"]) .tool svg { color: var(--lk-accent2); }
.hero-in { position: relative; z-index: 1; }
.ev-deco { position: absolute; inset: 68px 0 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* ---------- colour bands (the strip under the hero and above the footer) ---------- */
[data-band="flag"] .truck { background: linear-gradient(90deg, #fff 0 25%, #01411C 25% 100%); height: 10px; }
[data-band="gold"] .truck { background: linear-gradient(90deg, var(--lk-deep), #8A6A12, var(--lk-accent), #8A6A12, var(--lk-deep)); height: 8px; }
[data-band="green"] .truck { background: linear-gradient(90deg, #01411C, #2FBF71, #01411C); height: 8px; }
[data-band="grey"] .truck { background: #6B7280; height: 4px; }
[data-band="saffron"] .truck { background: linear-gradient(90deg, #FF7A45, #FFC94A, #FF7A45); height: 8px; }

/* ---------- greeting ribbon ---------- */
.ev-ribbon { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; width: fit-content; max-width: 100%;
  margin: 0 0 18px; padding: 10px 16px; border-radius: 16px; font-weight: 600; font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.4;
  color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ev-ribbon__ur { font-family: "Noto Nastaliq Urdu", serif; font-size: calc(19px * var(--mp-fs, 1)); line-height: 1.9; font-weight: 500; }
[data-event-tone="festive"] .ev-ribbon { background: linear-gradient(90deg, color-mix(in srgb, var(--lk-accent) 32%, transparent), rgba(255,255,255,.1)); border-color: color-mix(in srgb, var(--lk-accent) 60%, transparent); }
[data-event-tone="national"] .ev-ribbon { background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(47,191,113,.22)); border-color: rgba(255,255,255,.45); }
[data-event-tone="solemn"] .ev-ribbon { background: rgba(20,24,22,.55); border-color: rgba(255,255,255,.22); color: #E6E8E7; }
[data-event-tone="solemn"] .hero .dot { box-shadow: none; }

/* ====================== LAYOUTS ====================== */
/* Daylight: light page, photo as a card beside the headline */
[data-layout="daylight"] .nav { background: var(--lk-deep); }
[data-layout="daylight"] .hero { background: var(--lk-bg); }
[data-layout="daylight"] .hero::before { display: none; }
[data-layout="daylight"] .hero-in { padding-top: 112px; }
[data-layout="daylight"] .hero-img { position: relative; inset: auto; z-index: 0; margin: 84px 16px 0; height: 230px; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 50px -24px rgba(15,26,20,.45); }
[data-layout="daylight"] .hero-img + .ev-deco + .hero-in, [data-layout="daylight"] .hero-img ~ .hero-in { padding-top: 24px; }
@media (min-width: 960px) {
  [data-layout="daylight"] .hero-img { position: absolute; inset: 120px max(24px, calc((100vw - 1200px) / 2)) 120px auto; width: 44%; height: auto; margin: 0; border-radius: 32px; }
  [data-layout="daylight"] .hero-img ~ .hero-in { padding-top: 124px; }
  [data-layout="daylight"] .hero h1, [data-layout="daylight"] .hero-sub, [data-layout="daylight"] .ask { max-width: 52%; }
}
[data-layout="daylight"] .eyebrow { background: #fff; border-color: #E4E1D6; color: var(--lk-ink); }
[data-layout="daylight"] .hero-sub { color: #3D4A43; }
[data-layout="daylight"] .hero-sub .ur, [data-layout="daylight"] .ask-label, [data-layout="daylight"] .hero-meta { color: #5E6B64; }
[data-layout="daylight"] .hero-meta { border-top-color: #E4E1D6; } [data-layout="daylight"] .hero-meta b { color: var(--lk-ink); }
[data-layout="daylight"] .chip { border: 1px solid #E4E1D6; box-shadow: 0 1px 2px rgba(15,26,20,.06); }
[data-layout="daylight"] .chip.ghost { background: var(--lk-deep); color: #fff; border-color: var(--lk-deep); }
[data-layout="daylight"] .skyline::before { background: color-mix(in srgb, var(--lk-accent) 18%, transparent); }

/* Heritage: truck-art colours and a painted frame */
[data-layout="heritage"] .eyebrow { background: rgba(255,182,39,.16); border-color: rgba(255,182,39,.55); }
[data-layout="heritage"] .chip:not(.ghost) svg { color: #C2185B; }
[data-layout="heritage"] .truck { height: 26px; }
[data-layout="heritage"] .hero h1 { text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.dk-truckart::before, .dk-truckart::after { content: ""; position: absolute; left: 0; right: 0; height: 18px; background: url(/img/home/truck-strip.webp) center / auto 100% repeat-x; opacity: .95; }
.dk-truckart::before { top: 0; } .dk-truckart::after { bottom: 0; }
.dk-truckart { position: absolute; inset: 0; }

/* Minimal: white, no photo, big type, line skyline */
[data-layout="minimal"] .nav { background: var(--lk-deep); }
[data-layout="minimal"] .hero { background: var(--lk-bg); }
[data-layout="minimal"] .hero::before, [data-layout="minimal"] .hero-img { display: none; }
[data-layout="minimal"] .hero h1 { font-size: calc(clamp(44px, 8.5vw, 104px) * var(--mp-fs, 1)); max-width: 12ch; }
[data-layout="minimal"] .eyebrow { background: #F2F0E8; border-color: #E4E1D6; color: var(--lk-ink); }
[data-layout="minimal"] .hero-sub, [data-layout="minimal"] .hero-sub .ur, [data-layout="minimal"] .ask-label, [data-layout="minimal"] .hero-meta { color: #4D5550; }
[data-layout="minimal"] .hero-meta b { color: var(--lk-ink); } [data-layout="minimal"] .hero-meta { border-top-color: #E4E1D6; }
[data-layout="minimal"] .chip { border: 1px solid #D9DED9; }
[data-layout="minimal"] .chip.ghost { background: var(--lk-ink); color: #fff; }
[data-layout="minimal"] .skyline::before { background: color-mix(in srgb, var(--lk-accent) 30%, transparent); }

/* ====================== DECORATIONS ====================== */
.dk-bunting { display: block; width: 100%; height: 56px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); transform-origin: 50% 0; animation: dk-sway 6s ease-in-out infinite; }
.dk-flagpole { position: absolute; right: 6%; top: 64px; width: min(26vw, 230px); }
.dk-flag { width: 100%; height: auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,.35)); transform-origin: 0 50%; animation: dk-wave 3.2s ease-in-out infinite; }
.dk-lanterns { position: absolute; right: 3%; top: 0; width: min(42vw, 420px); color: var(--lk-accent); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--lk-accent) 55%, transparent)); }
.dk-lantern { transform-box: fill-box; transform-origin: 50% 0; animation: dk-sway 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.dk-glow { animation: dk-glow 2.6s ease-in-out infinite; }
.dk-stars { position: absolute; inset: 0; width: 100%; height: 75%; color: var(--lk-accent); }
@media (min-width: 900px) { .dk-jets { right: 0; left: 40%; } }
.dk-tw { animation: dk-twinkle 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.dk-moon { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--lk-accent) 70%, transparent)); }
.dk-lights { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 110px; color: var(--lk-accent); }
.dk-bulb { animation: dk-twinkle 2.2s ease-in-out infinite; animation-delay: var(--d, 0s); filter: drop-shadow(0 0 4px currentColor); }
.dk-candles { position: absolute; inset: auto 0 18% 0; height: 120px; }
.dk-candle { position: absolute; left: var(--x); bottom: 0; width: 10px; height: 46px; border-radius: 3px; background: linear-gradient(#F7EBD0, #CFBF9B); }
.dk-candle i { position: absolute; left: 50%; top: -22px; width: 14px; height: 22px; margin-left: -7px; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 50% 70%, #fff6c9, #ffb341 60%, rgba(255,140,0,0) 72%);
  filter: drop-shadow(0 0 12px #ffb341); animation: dk-flicker 1.4s ease-in-out infinite; animation-delay: var(--d); transform-origin: 50% 100%; }
@media (max-width: 700px) { .dk-candles { opacity: .55; } }
.dk-chinar { position: absolute; inset: 0; }
.dk-leaf { position: absolute; top: -40px; left: var(--x); width: 26px; color: #E2672F; opacity: .9; animation: dk-fall var(--t, 11s) linear infinite; animation-delay: var(--d); }
.dk-leaf:nth-child(3n) { color: #F4A259; width: 20px; } .dk-leaf:nth-child(4n) { color: #B83A1B; }
.dk-jets { position: absolute; inset: 0; }
.dk-jet { position: absolute; left: -30%; top: calc(2% + var(--i) * 22px); width: 130px; animation: dk-fly 11s linear infinite; animation-delay: calc(var(--i) * .35s); }
.dk-gears { position: absolute; right: 4%; top: 30px; width: min(30vw, 260px); color: var(--lk-accent); opacity: .85; }
.dk-gear { transform-box: fill-box; transform-origin: center; animation: dk-spin 14s linear infinite; } .dk-rev { animation-direction: reverse; animation-duration: 9s; }
.dk-rays { position: absolute; inset: 0; overflow: hidden; }
.dk-rays i { position: absolute; bottom: -10%; left: 62%; width: 30%; height: 140%; transform-origin: 50% 100%; background: linear-gradient(0deg, color-mix(in srgb, var(--lk-accent) 45%, transparent), transparent 70%);
  filter: blur(18px); opacity: .5; animation: dk-rays 9s ease-in-out infinite; }
.dk-rays i:nth-child(2) { transform: rotate(-18deg); animation-delay: -3s; } .dk-rays i:nth-child(3) { transform: rotate(16deg); animation-delay: -6s; }
.dk-dusk { position: absolute; inset: 0; }
.dk-dusk i { position: absolute; width: 60vw; height: 60vw; border-radius: 50%; right: -10vw; top: -20vw; background: radial-gradient(circle, rgba(255,255,255,.08), transparent 60%); animation: dk-drift 30s ease-in-out infinite alternate; }
.dk-dusk i + i { left: -20vw; top: 10vw; animation-duration: 38s; }
.dk-fireworks { position: absolute; inset: 0; }
.dk-burst { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.dk-burst i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px currentColor; color: #fff;
  transform: rotate(var(--a)) translateY(0); opacity: 0; animation: dk-burst 4.8s ease-out infinite; animation-delay: var(--d); }
.dk-burst.c1 i { background: #7CF0B0; color: #7CF0B0; } .dk-burst.c2 i { background: #FFE08A; color: #FFE08A; }
.dk-kites { position: absolute; inset: 0; }
.dk-kite { position: absolute; width: 42px; top: calc(18% + var(--i) * 12%); left: calc(62% + var(--i) * 10%); animation: dk-kite 7s ease-in-out infinite; animation-delay: calc(var(--i) * -2s); }
.dk-verse { position: absolute; right: 5%; top: 18%; display: grid; gap: 8px; text-align: right; font-family: "Noto Nastaliq Urdu", serif; font-size: calc(clamp(18px, 2.3vw, 30px) * var(--mp-fs, 1)); line-height: 2.1; color: var(--lk-accent); text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.dk-verse span { opacity: 0; animation: dk-fadeup 1.6s ease-out forwards; animation-delay: var(--d); }
@media (max-width: 899px) { .dk-verse { display: none; } }
.dk-words { position: absolute; right: 6%; top: 20%; height: 1.3em; font-size: calc(clamp(26px, 4vw, 52px) * var(--mp-fs, 1)); font-weight: 800; letter-spacing: -.02em; color: var(--lk-accent); }
.dk-words span { position: absolute; right: 0; opacity: 0; animation: dk-words 9s ease-in-out infinite; animation-delay: calc(var(--i) * 3s); white-space: nowrap; }
@media (max-width: 899px) { .dk-words, .dk-gears, .dk-flagpole { opacity: .35; } }

@keyframes dk-sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes dk-wave { 0%, 100% { transform: perspective(400px) rotateY(0) skewY(0); } 50% { transform: perspective(400px) rotateY(-14deg) skewY(-2deg); } }
@keyframes dk-glow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes dk-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes dk-flicker { 0%, 100% { transform: scale(1) rotate(-2deg); opacity: .95; } 35% { transform: scale(1.08, .94) rotate(2deg); } 70% { transform: scale(.95, 1.06) rotate(-1deg); opacity: .85; } }
@keyframes dk-fall { 0% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(40px, 50vh, 0) rotate(180deg); } 100% { transform: translate3d(-20px, 105vh, 0) rotate(360deg); } }
@keyframes dk-fly { 0% { transform: translateX(0); } 70%, 100% { transform: translateX(170vw); } }
@keyframes dk-spin { to { transform: rotate(360deg); } }
@keyframes dk-rays { 0%, 100% { opacity: .3; } 50% { opacity: .65; } }
@keyframes dk-drift { to { transform: translate3d(-6vw, 4vw, 0) scale(1.1); } }
@keyframes dk-burst { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0); } 8% { opacity: 1; } 45% { opacity: .9; transform: rotate(var(--a)) translateY(-70px); } 60%, 100% { opacity: 0; transform: rotate(var(--a)) translateY(-80px); } }
@keyframes dk-kite { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(-14px, -18px) rotate(8deg); } }
@keyframes dk-fadeup { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes dk-words { 0% { opacity: 0; transform: translateY(14px); } 8%, 30% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; transform: translateY(-10px); } }

/* ====================== POINTER / TOUCH EFFECTS (js/fx.js) ====================== */
/* The parallax/pan scales the photo past its frame: clip it, or split/poster compositions show an unshaded sliver
   of photo on the text panel (a visible strip at the seam). */
.hero-img { overflow: hidden; }
/* Decorations that share the photo's area (split on phones, poster everywhere) fade out with it instead of ending in a line. */
[data-compose="poster"] .ev-deco { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
@media (max-width: 959px) {
  [data-compose="split"] .ev-deco, [data-compose="split-l"] .ev-deco { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
}
.fx-pointer .hero-img img { transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px), 0) scale(1.06); transition: transform .25s ease-out; will-change: transform; }
.fx-pointer .ev-deco > * { translate: calc(var(--mx, 0) * 16px) calc(var(--my, 0) * 10px); transition: translate .3s ease-out; }
.fx-touch .hero-img img { animation: fx-pan 26s ease-in-out infinite alternate; }
@keyframes fx-pan { from { transform: scale(1.04) translate3d(1.5%, 0, 0); } to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); } }
.fx-spark { position: fixed; z-index: 60; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%; pointer-events: none; background: var(--lk-accent);
  box-shadow: 0 0 10px var(--lk-accent); animation: fx-spark .9s ease-out forwards; }
@keyframes fx-spark { to { opacity: 0; transform: translate3d(var(--dx, 0), 24px, 0) scale(.3); } }

/* ---------- no motion: admin choice or the visitor's setting ---------- */
[data-motion="none"] .ev-deco *, [data-motion="none"] .hero-img img { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ev-deco *, .hero-img img, .fx-spark { animation: none !important; transition: none !important; }
  .dk-verse span, .dk-words span:first-child { opacity: 1; }
  .dk-jets, .dk-chinar, .dk-fireworks { display: none; }
}

/* ====================== COMPOSITIONS (data-compose, per preset) ======================
   Rule: text never sits on raw photo. Either the photo has its own area (split, poster, sky) or it is dimmed under a strong
   scrim (center, solemn, verse). Each composition changes WHERE things are, so an event feels like a different page. */

/* --- event feature block: Urdu name, date of the day, countdown (or the verse) --- */
.ev-feature { display: grid; gap: 6px; margin: 0 0 14px; }
.ev-feature__ur { font-family: "Noto Nastaliq Urdu", serif; font-size: calc(clamp(30px, 4.6vw, 60px) * var(--mp-fs, 1)); line-height: 2; color: var(--lk-accent); text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.ev-feature__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ev-feature__date { font-size: calc(13px * var(--mp-fs, 1)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.ev-feature__date small { font-weight: 500; letter-spacing: .02em; text-transform: none; opacity: .8; }
.ev-feature__count { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: calc(14px * var(--mp-fs, 1));
  background: color-mix(in srgb, var(--lk-accent) 22%, transparent); border: 1px solid color-mix(in srgb, var(--lk-accent) 55%, transparent); }
.ev-feature__count b { font-size: calc(20px * var(--mp-fs, 1)); color: var(--lk-accent); }
.ev-feature__count--today { background: var(--lk-accent); color: var(--lk-bg); border-color: var(--lk-accent); }
.ev-feature__verse { display: grid; gap: 4px; font-family: "Noto Nastaliq Urdu", serif; font-size: calc(clamp(26px, 4.4vw, 56px) * var(--mp-fs, 1)); line-height: 2.1; color: var(--lk-accent); text-shadow: 0 2px 22px rgba(0,0,0,.45); }
[data-compose]:not([data-compose="overlay"]) .hero-meta { display: none; }

/* shared helpers for compositions that give the photo its own area */
[data-compose="split"] .hero::before, [data-compose="split-l"] .hero::before, [data-compose="poster"] .hero::before, [data-compose="sky"] .hero::before { display: none; }
[data-compose="split"] .hero-img::after, [data-compose="split-l"] .hero-img::after, [data-compose="poster"] .hero-img::after, [data-compose="sky"] .hero-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; }

/* --- SPLIT (text left, photo right) and SPLIT-L (photo left, text right) --- */
@media (min-width: 960px) {
  [data-compose="split"] .hero-img { inset: 0 0 0 50%; }
  [data-compose="split"] .hero-img::after { background: linear-gradient(90deg, var(--lk-bg) 0%, color-mix(in srgb, var(--lk-bg) 40%, transparent) 18%, transparent 45%); }
  [data-compose="split"] .hero-in > :not(.skyline):not(.hero-meta) { max-width: 46%; }
  [data-compose="split-l"] .hero-img { inset: 0 50% 0 0; }
  [data-compose="split-l"] .hero-img::after { background: linear-gradient(270deg, var(--lk-bg) 0%, color-mix(in srgb, var(--lk-bg) 40%, transparent) 18%, transparent 45%); }
  [data-compose="split-l"] .hero-in > :not(.skyline):not(.hero-meta) { margin-left: 54%; max-width: 46%; }
  [data-compose="split-l"] .dk-words { right: auto; left: 6%; }
  [data-compose="split"] .hero h1, [data-compose="split-l"] .hero h1 { font-size: calc(clamp(40px, 4.6vw, 68px) * var(--mp-fs, 1)); }
}
@media (max-width: 959px) {
  [data-compose="split"] .hero-img, [data-compose="split-l"] .hero-img, [data-compose="poster"] .hero-img {
    position: relative; inset: auto; display: block; z-index: 0; height: 44vh; min-height: 240px; margin-top: 68px; }
  [data-compose="split"] .hero-img::after, [data-compose="split-l"] .hero-img::after, [data-compose="poster"] .hero-img::after {
    background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--lk-bg) 45%, transparent) 65%, color-mix(in srgb, var(--lk-bg) 85%, transparent) 88%, var(--lk-bg) 100%); }
  [data-compose="split"] .hero-in, [data-compose="split-l"] .hero-in, [data-compose="poster"] .hero-in { padding-top: 18px; min-height: 0; }
  [data-compose="split"] .ev-deco, [data-compose="split-l"] .ev-deco, [data-compose="poster"] .ev-deco { bottom: auto; height: calc(44vh); }
}

/* --- POSTER: photo band on top, text on a solid band below --- */
@media (min-width: 960px) {
  [data-compose="poster"] .hero-img { position: relative; inset: auto; display: block; z-index: 0; height: 56vh; min-height: 380px; }
  [data-compose="poster"] .hero-img::after { background: linear-gradient(180deg, color-mix(in srgb, var(--lk-bg) 55%, transparent) 0%, transparent 25%, transparent 60%, var(--lk-bg) 100%); }
  [data-compose="poster"] .hero-in { padding-top: 8px; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  [data-compose="poster"] .hero-in > .ev-ribbon, [data-compose="poster"] .hero-in > .ev-feature, [data-compose="poster"] .hero-in > .eyebrow, [data-compose="poster"] .hero-in > h1 { grid-column: 1; }
  [data-compose="poster"] .hero-in > .hero-sub, [data-compose="poster"] .hero-in > .ask { grid-column: 2; }
  [data-compose="poster"] .hero-in > .hero-sub { grid-row: 1 / span 3; align-self: end; margin-top: 0; }
  [data-compose="poster"] .hero-in > .skyline, [data-compose="poster"] .hero-in > .hero-meta { grid-column: 1 / -1; }
  [data-compose="poster"] .hero h1 { margin-top: -0.6em; font-size: calc(clamp(48px, 6vw, 92px) * var(--mp-fs, 1)); text-shadow: 0 4px 30px color-mix(in srgb, var(--lk-bg) 80%, transparent); }
  [data-compose="poster"] .ev-deco { height: 56vh; bottom: auto; inset-block-start: 0; }
}

/* --- CENTER STAGE: big centred type over a dimmed photo --- */
[data-compose="center"] .hero-img img, [data-compose="verse"] .hero-img img { filter: brightness(.5) saturate(1.1); }
[data-compose="center"] .hero::before, [data-compose="verse"] .hero::before {
  background: radial-gradient(ellipse 70% 60% at 50% 45%, color-mix(in srgb, var(--lk-bg) 45%, transparent), color-mix(in srgb, var(--lk-bg) 88%, transparent) 75%, var(--lk-bg) 100%); }
[data-compose="center"] .hero-in, [data-compose="sky"] .hero-in, [data-compose="solemn"] .hero-in, [data-compose="verse"] .hero-in { align-items: center; text-align: center; }
[data-compose="center"] .hero-in > *, [data-compose="sky"] .hero-in > *, [data-compose="solemn"] .hero-in > *, [data-compose="verse"] .hero-in > * { margin-left: auto; margin-right: auto; }
[data-compose="center"] .ev-feature__row, [data-compose="sky"] .ev-feature__row, [data-compose="solemn"] .ev-feature__row, [data-compose="verse"] .ev-feature__row,
[data-compose="center"] .chips, [data-compose="sky"] .chips, [data-compose="solemn"] .chips, [data-compose="verse"] .chips { justify-content: center; }
[data-compose="center"] .hero h1 { max-width: 15ch; font-size: calc(clamp(44px, 7.6vw, 104px) * var(--mp-fs, 1)); text-shadow: 0 6px 40px rgba(0,0,0,.45); }
[data-compose="center"] .hero-sub, [data-compose="sky"] .hero-sub, [data-compose="verse"] .hero-sub { max-width: 52ch; }
[data-compose="center"] .ev-feature__ur { font-size: calc(clamp(34px, 5.4vw, 72px) * var(--mp-fs, 1)); }

/* --- NIGHT SKY: sky with stars above, photo fading in below, centred text --- */
[data-compose="sky"] .hero-img { inset: 46% 0 0 0; }
[data-compose="sky"] .hero-img img { object-position: center 70%; }
[data-compose="sky"] .hero-img::after { background: linear-gradient(180deg, var(--lk-bg) 0%, color-mix(in srgb, var(--lk-bg) 50%, transparent) 35%, color-mix(in srgb, var(--lk-bg) 30%, transparent) 100%); }
[data-compose="sky"] .hero { background: radial-gradient(ellipse 80% 70% at 50% 0%, color-mix(in srgb, var(--lk-accent) 14%, var(--lk-bg)), var(--lk-bg) 70%); }
[data-compose="sky"] .hero h1 { font-size: calc(clamp(40px, 6.4vw, 88px) * var(--mp-fs, 1)); max-width: 16ch; }
[data-compose="sky"] .dk-stars { height: 60%; }

/* --- SOLEMN: black page, greyscale image, quiet centred text, no festive elements --- */
[data-compose="solemn"] .hero { background: #000; }
[data-compose="solemn"] .hero-img img { filter: grayscale(1) brightness(.32) contrast(1.05); }
[data-compose="solemn"] .hero::before { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,0,0,.35), rgba(0,0,0,.92) 70%, #000 100%); }
[data-compose="solemn"] .hero h1 { font-weight: 600; font-size: calc(clamp(34px, 5.2vw, 64px) * var(--mp-fs, 1)); letter-spacing: -.02em; max-width: 18ch; }
[data-compose="solemn"] .hero h1 em { color: var(--lk-accent); }
[data-compose="solemn"] .ev-feature__ur { color: #D6D6D6; text-shadow: none; }
[data-compose="solemn"] .ev-feature__count { background: transparent; border-color: rgba(255,255,255,.3); } [data-compose="solemn"] .ev-feature__count b { color: #fff; }
[data-compose="solemn"] .chip { background: transparent; color: #E8E8E8; border: 1px solid rgba(255,255,255,.28); box-shadow: none; }
[data-compose="solemn"] .chip svg, [data-compose="solemn"] .chip i { color: #BDBDBD; }
[data-compose="solemn"] .eyebrow { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
[data-compose="solemn"] .skyline::before { background: rgba(255,255,255,.07); }
[data-compose="solemn"] .truck { background: #1a1a1a !important; height: 2px !important; }
[data-compose="solemn"] .nav.scrolled, [data-compose="solemn"] .daily, [data-compose="solemn"] .foot { background: #000; }
[data-compose="solemn"] .fx-spark { display: none; }

/* --- VERSE: the couplet is the hero --- */
[data-compose="verse"] .ev-feature { margin-bottom: 6px; }
[data-compose="verse"] .hero h1 { font-size: calc(clamp(30px, 4.2vw, 56px) * var(--mp-fs, 1)); max-width: 22ch; }
[data-compose="verse"] .dk-verse { display: none; }

/* phones: centred compositions keep generous type but never crowd */
@media (max-width: 599px) {
  [data-compose="center"] .hero h1, [data-compose="sky"] .hero h1 { font-size: calc(clamp(36px, 11vw, 52px) * var(--mp-fs, 1)); }
  .ev-feature__ur { font-size: calc(clamp(28px, 9vw, 40px) * var(--mp-fs, 1)); }
  .ev-feature__verse { font-size: calc(clamp(22px, 6.6vw, 30px) * var(--mp-fs, 1)); }
}

/* --- composition polish (round 2) --- */
[data-compose="split"] .ev-feature__ur, [data-compose="split-l"] .ev-feature__ur, [data-compose="poster"] .ev-feature__ur, [data-compose="overlay"] .ev-feature__ur { text-align: left; }
.ev-feature__ur { margin-bottom: 4px; }
[data-compose="split-l"] .dk-words { display: none; }
[data-compose="sky"] .dk-candles { bottom: 2%; height: 90px; opacity: .8; }
@media (min-width: 960px) {
  [data-compose="poster"] .hero-img { height: 44vh; min-height: 320px; }
  [data-compose="poster"] .ev-deco { height: 44vh; }
  [data-compose="poster"] .hero-in > .ev-ribbon { grid-column: 2; grid-row: 1; justify-self: start; }
  [data-compose="poster"] .hero-in > .ev-feature { grid-column: 1; grid-row: 1 / span 2; }
  [data-compose="poster"] .hero-in > .eyebrow { grid-column: 1; grid-row: 3; }
  [data-compose="poster"] .hero-in > h1 { grid-column: 1; grid-row: 4; margin-top: 4px; }
  [data-compose="poster"] .hero-in > .hero-sub { grid-column: 2; grid-row: 2 / span 2; align-self: start; margin-top: 4px; }
  [data-compose="poster"] .hero-in > .ask { grid-column: 2; grid-row: 4; align-self: end; }
  [data-compose="poster"] .ev-feature__ur { font-size: calc(clamp(30px, 3.6vw, 48px) * var(--mp-fs, 1)); }
}
@media (min-width: 960px) { [data-compose="poster"] .hero h1 { font-size: calc(clamp(40px, 4.4vw, 66px) * var(--mp-fs, 1)); } }
[data-compose="sky"] .hero-img { inset: 60% 0 0 0; }
[data-compose="sky"] .hero-img::after { background: linear-gradient(180deg, var(--lk-bg) 0%, color-mix(in srgb, var(--lk-bg) 75%, transparent) 30%, color-mix(in srgb, var(--lk-bg) 35%, transparent) 100%); }
.ev-feature__ur { line-height: 2.35; padding-bottom: 6px; }

/* ====================== SEASONS (monthly looks) ====================== */
.ev-feature__cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; font-weight: 700; text-decoration: none;
  background: var(--lk-accent); color: var(--lk-bg); box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); }
.ev-feature__cta:hover { filter: brightness(1.08); }
.dk-fall { position: absolute; inset: 0; overflow: hidden; }
.dk-fall i { position: absolute; top: -6%; left: var(--x); display: block; animation: dk-drop var(--t, 10s) linear infinite; animation-delay: calc(var(--d) * -1); transform: scale(var(--s, 1)); }
.dk-snow i { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: .85; filter: blur(.4px); }
.dk-petals i { width: 16px; color: #FFC2D6; } .dk-petals i:nth-child(3n) { color: #fff; }
.dk-petals svg, .dk-leaves svg { display: block; width: 100%; height: auto; }
.dk-leaves i { width: 22px; color: #FFB347; } .dk-leaves i:nth-child(3n) { color: #E2672F; } .dk-leaves i:nth-child(4n) { color: #F4D35E; }
.dk-rain i { width: 1.5px; height: 46px; background: linear-gradient(transparent, rgba(220,240,255,.75)); animation-name: dk-rainfall; animation-duration: calc(var(--t, 10s) / 9); }
.dk-confetti i { width: 9px; height: 13px; }
.dk-confetti b { display: block; width: 100%; height: 100%; border-radius: 2px; background: #FFB627; }
.dk-confetti b.c1 { background: #FF7A9A; } .dk-confetti b.c2 { background: #FFFFFF; } .dk-confetti b.c3 { background: #FF8C1A; border-radius: 50%; }
@keyframes dk-drop { 0% { transform: translate3d(0, 0, 0) rotate(0) scale(var(--s, 1)); } 50% { transform: translate3d(28px, 52vh, 0) rotate(160deg) scale(var(--s, 1)); }
  100% { transform: translate3d(-12px, 108vh, 0) rotate(340deg) scale(var(--s, 1)); } }
@keyframes dk-rainfall { from { transform: translate3d(0, -10vh, 0) rotate(12deg); } to { transform: translate3d(-24px, 110vh, 0) rotate(12deg); } }
@media (max-width: 700px) { .dk-fall i:nth-child(2n) { display: none; } }
@media (prefers-reduced-motion: reduce) { .dk-fall { display: none; } }
/* photo-beside-text compositions: the nav gets a solid bar so the logo and links never sit on a bright photo */
[data-compose="split"] .nav, [data-compose="split-l"] .nav, [data-compose="poster"] .nav { background: color-mix(in srgb, var(--lk-deep) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }