/* Sunset Voyager: dusk purple to magenta to orange, polaroid snapshots, Playfair italics */
:root {
	--bg: #1a0f2e;
	--bg-deep: #120a22;
	--body-bg: linear-gradient(180deg, #1a0f2e 0%, #2a1240 50%, #1a0f2e 100%);
	--ink: #fff3ea;
	--ink-soft: rgba(255, 243, 234, 0.78);
	--link: #ffb347;
	--accent: #ffb347;
	--accent-ink: #1a0f2e;
	--accent-2: #ff5a8c;
	--line: rgba(255, 243, 234, 0.18);
	--surface: rgba(255, 255, 255, 0.07);
	--surface-hover: rgba(255, 255, 255, 0.12);
	--footer-bg: #120a22;
	--footer-ink: #fff3ea;
	--f-head: 'Playfair Display', Georgia, serif;
	--f-body: 'Montserrat', system-ui, sans-serif;
	--head-weight: 800;
	--head-tracking: -0.02em;
	--radius-btn: 999px;
	--radius-card: 24px;
	--c3: #8a5cff;
	--c4: #ff7a59;
	--band: linear-gradient(120deg, #5b2a9e 0%, #d6406f 55%, #ff9a52 100%);
	--band-ink: #ffffff;
}
body { background-attachment: fixed; }
.brand { font-style: italic; }
.brand__text .grad-text { color: #ffb347; }
.primary-nav a { font-weight: 600; font-size: 15px; }
.btn--grad { background: linear-gradient(120deg, #ffb347, #ff5a8c); color: #1a0f2e; }
.btn--grad:hover { box-shadow: 0 14px 36px rgba(255, 90, 140, 0.5); }
.eyebrow { color: #ffb347; letter-spacing: 0.22em; }
.site-footer .grad-text, .site-footer a:hover, .site-footer .link-arrow { color: #ffb347; }
.entry__cta .btn { background: #1a0f2e; color: #fff3ea; }
.entry__cta { color: #1a0f2e; }
.related { background: rgba(255, 255, 255, 0.04); }

/* Hero */
.hero { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #3a1d78 0%, #b8306a 48%, #ff8a4c 82%, #ffc267 100%); color: #fff; }
.hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; mix-blend-mode: soft-light; }
.hero__sun { position: absolute; z-index: -1; left: 50%; bottom: -220px; width: 560px; height: 560px; margin-left: -280px; border-radius: 50%; background: radial-gradient(circle, #fff3c4 0%, #ffd36b 40%, rgba(255, 180, 80, 0) 70%); }
.hero__inner { padding-top: 110px; padding-bottom: 150px; text-align: center; }
.hero__title { max-width: 980px; margin: 18px auto 0; font-size: clamp(46px, 8vw, 112px); line-height: 0.98; color: #fff; text-shadow: 0 6px 40px rgba(26, 15, 46, 0.4); }
.hero__title em { font-weight: 600; color: #ffe08a; }
.hero__text { max-width: 600px; margin: 24px auto 0; font-size: 20px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); }
.hero .eyebrow { color: #fff; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }
.hero .btn--ghost { color: #fff; }

/* Polaroids */
.polaroids { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 26px; margin-top: 52px; padding-bottom: 30px; }
.polaroid { overflow: visible; aspect-ratio: 4 / 5; border: 12px solid #fff; border-bottom-width: 56px; border-radius: 4px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); transition: transform 0.3s ease; }
.polaroid:nth-child(odd) { transform: rotate(-2.5deg); }
.polaroid:nth-child(even) { transform: rotate(2deg) translateY(18px); }
.polaroid:hover { transform: rotate(0) translateY(-8px) scale(1.03); z-index: 3; }
.polaroid:hover .tile__img { transform: none; }
.polaroid .tile__label { left: 0; right: 0; bottom: -44px; max-width: 100%; text-align: center; font-family: var(--f-head); font-style: italic; font-weight: 600; font-size: 17px; color: #2b1a2e; text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Journey legs */
.legs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.leg { position: relative; display: block; padding: 32px 26px; border-radius: 24px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); overflow: hidden; transition: transform 0.25s ease, background 0.25s ease; }
.leg:hover { transform: translateY(-8px); background: rgba(255, 255, 255, 0.13); }
.leg::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #ffb347, #ff5a8c); }
.leg__n { display: block; font-family: var(--f-head); font-style: italic; font-size: 54px; line-height: 1; color: #ffb347; }
.leg__k { display: block; margin-top: 14px; font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #ff8fb0; }
.leg h3 { margin-top: 8px; font-size: 24px; line-height: 1.15; }
.leg p { margin: 12px 0 0; line-height: 1.6; color: var(--ink-soft); }

/* Dusk box */
.dusk { padding: clamp(32px, 6vw, 72px); text-align: center; border-radius: 40px; background: linear-gradient(135deg, #5b2a9e, #d6406f 60%, #ff9a52); color: #fff; box-shadow: 0 30px 80px rgba(214, 64, 111, 0.35); }
.dusk h2 { font-size: clamp(36px, 6vw, 76px); line-height: 1; color: #fff; }
.dusk h2 em { font-weight: 600; color: #ffe08a; }
.dusk p { max-width: 620px; margin: 22px auto 0; line-height: 1.7; color: rgba(255, 255, 255, 0.92); }
.dusk .btn--ghost { color: #fff; }

@media (max-width: 900px) {
	.polaroids { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.legs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hero__inner { padding-top: 64px; padding-bottom: 110px; }
}
@media (max-width: 600px) {
	.polaroids, .legs { grid-template-columns: 1fr; }
	.polaroid:nth-child(even) { transform: rotate(2deg); }
}