/* Dream Journeys: calm sunset pastels, navy text, gold accents. */

:root {
  --navy: #14204d;
  --navy-deep: #0b1440;
  --navy-soft: #3b466f;
  --gold: #b98a2e;
  --gold-bright: #e4b653;
  --cream: #fffaf3;
  --paper: rgba(255, 250, 243, 0.74);
  --line: rgba(20, 32, 77, 0.12);
  --shadow: 0 1px 2px rgba(20, 32, 77, 0.06), 0 12px 32px -12px rgba(20, 32, 77, 0.22);
  --radius: 14px;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h, 4.5rem) + .5rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--navy);
  background: #fbeee2;
  min-height: 100vh;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--navy); color: var(--cream); padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; margin: 0; color: var(--navy-deep); }
h2 { font-size: clamp(2.1rem, 4.5vw, 3rem); }
p { margin: 0 0 1em; }

/* ---------- Animated sunset background ---------- */
/* Colour is the main event. The base gradient is slightly taller than the screen and drifts
   slowly up and down, each stop cycles through the pastel palette (cream, peach, blush,
   lavender, mist) and its position wanders, all on 25-45s cycles of different lengths so the
   pattern never visibly repeats. Three huge blurred layers drift over the top as a secondary
   movement. The registered properties below hold the resting (static / reduced-motion) look. */
@property --c0 { syntax: "<color>"; inherits: false; initial-value: #fdf6ec; }  /* cream */
@property --c1 { syntax: "<color>"; inherits: false; initial-value: #fcebdc; }  /* pale peach */
@property --c2 { syntax: "<color>"; inherits: false; initial-value: #f9e0da; }  /* blush pink */
@property --c3 { syntax: "<color>"; inherits: false; initial-value: #f1e3ee; }  /* very pale lavender */
@property --c4 { syntax: "<color>"; inherits: false; initial-value: #e4ebf3; }  /* misty pale blue */
@property --y1 { syntax: "<percentage>"; inherits: false; initial-value: 26%; }
@property --y2 { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --y3 { syntax: "<percentage>"; inherits: false; initial-value: 74%; }

.sky {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg,
    var(--c0) 0%, var(--c1) var(--y1), var(--c2) var(--y2), var(--c3) var(--y3), var(--c4) 100%);
  animation-name: c0, c1, c2, c3, c4, y1, y2, y3, shift;
  animation-duration: 29s, 33s, 26s, 37s, 31s, 31s, 39s, 34s, 45s;
  animation-delay: -12s, -30s, -5s, -44s, -21s, -18s, -50s, -9s, -25s;
  animation-direction: normal, normal, normal, normal, normal, normal, normal, normal, alternate;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: no-preference) {
  .sky { background-size: 100% 165%; }  /* extra height for the gradient to drift through */
}
.sky::before { /* low warm glow */
  content: ""; position: absolute; left: 50%; top: 38%; width: 120vmax; height: 70vmax;
  margin-left: -60vmax;
  background: radial-gradient(closest-side, rgba(255, 205, 175, 0.4), rgba(255, 205, 175, 0) 70%);
  animation: glow 61s ease-in-out infinite alternate;
}
.sky i {
  position: absolute; left: -50%; width: 200%;
  background: center / 100% 100% no-repeat;
  will-change: translate, opacity;
  animation-name: drift, breathe;
  animation-duration: var(--drift), var(--breathe);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: var(--dir, alternate), alternate;
  animation-delay: var(--phase, 0s), var(--phase2, 0s);
}
.sky .l1 { top: -8%;  height: 92%;  background-image: url(/img/bg-a.svg); --dx: 15%; --dy: 8%; --drift: 89s;  --breathe: 53s; --phase: -40s; --phase2: -20s; }
.sky .l2 { top: 8%;   height: 100%; background-image: url(/img/bg-b.svg); --dx: 17%; --dy: 7%; --drift: 103s; --breathe: 61s; --phase: -90s; --phase2: -40s; --dir: alternate-reverse; }
.sky .l3 { top: 24%;  height: 92%;  background-image: url(/img/bg-c.svg); --dx: 13%; --dy: 9%; --drift: 79s;  --breathe: 47s; --phase: -15s; --phase2: -30s; --dir: alternate-reverse; }

@keyframes drift {
  from { translate: calc(var(--dx) * -1) calc(var(--dy) * -1); }
  to   { translate: var(--dx) var(--dy); }
}
@keyframes breathe { from { opacity: .4; } to { opacity: 1; } }
@keyframes glow    { from { translate: -14% 0; opacity: .5; } to { translate: 14% -8%; opacity: 1; } }
@keyframes shift   { from { background-position: 50% 0%; } to { background-position: 50% 100%; } }

/* Colour cycles: four steps through the palette, starting and ending on the same colour so the loop has no seam. */
@keyframes c0 { 0%, 100% { --c0: #fdf6ec; } 25% { --c0: #f8d6bb; } 50% { --c0: #f3ccd1; } 75% { --c0: #e3d5f1; } }  /* cream > peach > blush > lavender > cream */
@keyframes c1 { 0%, 100% { --c1: #fcebdc; } 25% { --c1: #f2c7cf; } 50% { --c1: #dfd0f0; } 75% { --c1: #fdf3e2; } }  /* peach > blush > lavender > cream > peach */
@keyframes c2 { 0%, 100% { --c2: #f9e0da; } 25% { --c2: #e1d1f0; } 50% { --c2: #d0e0f0; } 75% { --c2: #f8d3b6; } }  /* blush > lavender > mist > peach > blush */
@keyframes c3 { 0%, 100% { --c3: #f1e3ee; } 25% { --c3: #d0e0f0; } 50% { --c3: #f8d5ba; } 75% { --c3: #f3ccd1; } }  /* lavender > mist > peach > blush > lavender */
@keyframes c4 { 0%, 100% { --c4: #e4ebf3; } 25% { --c4: #dfd0f0; } 50% { --c4: #f3ccd1; } 75% { --c4: #f7d9c0; } }  /* mist > lavender > blush > peach > mist */
/* Stops stay in order with at least an 8% gap, so the colours never form a hard edge. */
@keyframes y1 { 0%, 100% { --y1: 26%; } 33% { --y1: 32%; } 66% { --y1: 8%; } }
@keyframes y2 { 0%, 100% { --y2: 50%; } 33% { --y2: 40%; } 66% { --y2: 60%; } }
@keyframes y3 { 0%, 100% { --y3: 74%; } 33% { --y3: 68%; } 66% { --y3: 88%; } }

@media (prefers-reduced-motion: reduce) {
  .sky, .sky::before, .sky i { animation: none; }
  .sky i { translate: 0 0; opacity: .85; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; padding-block: .9375rem;  /* base (phones); same height whether pinned or not */
  background: transparent;
  transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
/* Once content scrolls underneath: soft translucent cream, gentle blur, hairline + faint shadow
   (box-shadow, not a border, so the header's height never changes). */
.site-header.is-scrolled {
  background: rgba(253, 246, 236, 0.74);
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 1px 0 rgba(20, 32, 77, 0.06), 0 10px 24px -16px rgba(20, 32, 77, 0.18);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled { background: rgba(253, 246, 236, 0.94); }
}
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
/* Desktop/tablet: ~100px tall (62px padding + 38px content). Phones keep the slimmer base above. */
@media (min-width: 521px) { .site-header { padding-block: 1.9375rem; } }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wordmark { font-family: var(--font-head); font-size: 1.6875rem; line-height: 1.3; font-weight: 700; text-decoration: none; color: var(--navy-deep); white-space: nowrap; }
.wordmark-star { display: inline-block; height: .9em; width: auto; vertical-align: -.1em; }
.nav { display: flex; gap: 1.5rem; font-size: 1.0625rem; }
.nav a { text-decoration: none; padding: .25rem 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--gold); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font: 700 1rem/1 var(--font-body); letter-spacing: .01em;
  padding: .95rem 1.5rem; border-radius: 10px; text-decoration: none; cursor: pointer;
  border: 1px solid var(--navy); color: var(--navy); background: transparent;
  transition: background-color .3s, color .3s, box-shadow .3s, transform .3s;
}
.btn:hover { background: rgba(20, 32, 77, 0.07); }
.btn-primary { background: var(--navy); color: var(--cream); border-color: var(--navy); box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--navy-deep); }
.btn-subscribe { color: #fff; }  /* filled navy via .btn-primary; icon follows via currentColor */
.btn-gold { background: #f6dfa8; border-color: #d9b45c; }
.btn-gold:hover { background: #f3d68f; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
/* Hero "Listen on YouTube": coral-to-pink, with the YouTube play-button icon (its triangle is a cut-out,
   so the gradient shows through). Padding is trimmed by the icon's extra width to keep the button's size. */
.btn.btn-youtube {
  color: #fff; border-color: transparent; background-origin: border-box;
  background: linear-gradient(90deg, #FF6068 0%, #FF496F 45%, #F72B86 100%) border-box;
  padding-inline: calc(1.5rem - 3.8px);
}
.btn.btn-youtube:hover { background: linear-gradient(90deg, #F65360 0%, #F63C68 45%, #E9237B 100%) border-box; }
.btn.btn-youtube svg { width: 26px; height: 1.15em; }
@media (max-width: 520px) { .btn.btn-youtube { padding-inline: calc(1.25rem - 3.8px); } }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

/* ---------- Hero ---------- */
/* The gap from the CTA to the About card = this bottom padding + the About section's top padding.
   Aim for a total of 104px (phones) up to 128px (wide desktop), and subtract the section padding. */
.hero { padding: 1rem 0 calc(clamp(6.5rem, 9vw, 8rem) - clamp(3rem, 7vw, 5.5rem)); text-align: center; }
.hero-art {
  margin-inline: auto; max-width: 1000px; border-radius: 22px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(11, 20, 64, .1), 0 30px 60px -24px rgba(11, 20, 64, .55);
  background: var(--navy-deep);
}
.hero-art img { width: 100%; }
.tagline { font-family: var(--font-head); font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 500; font-style: italic; margin: clamp(2rem, 4vw, 3rem) 0 1.75rem; color: var(--navy); }
.hero .btn-row { justify-content: center; }

/* ---------- Sections ---------- */
section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head p { color: var(--navy-soft); margin: .9rem auto 0; max-width: 34em; font-size: 1.1875rem; }
.ornament { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 0 auto 1rem; color: var(--gold); }
.ornament::before, .ornament::after { content: ""; width: 48px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.ornament::after { transform: scaleX(-1); }
.ornament img { width: 34px; height: auto; flex: none; }

.about-card {
  max-width: 760px; margin-inline: auto; text-align: center;
  background: var(--paper); border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 20px; box-shadow: var(--shadow);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3.5rem);
}
.about-card h2 { margin-bottom: 1.25rem; }
.about-card .btn-row { justify-content: center; align-items: center; margin-top: 2rem; }
.about-card .btn-row > .btn { height: 60px; }  /* matches the official Buy Me a Coffee button's native 60px */
/* Reserved space for the official (60px tall) Buy Me a Coffee button so nothing shifts when it loads. */
.bmc-slot { min-height: 60px; min-width: 210px; display: flex; align-items: center; justify-content: center; }
.bmc-slot .bmc-btn-container { display: flex; }

/* ---------- Video cards ---------- */
.grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; gap: 1.5rem; } }

.card { background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid rgba(255, 255, 255, .7); transition: transform .4s, box-shadow .4s; }
.card:hover { transform: translateY(-3px); }
.card-media { position: relative; aspect-ratio: 16 / 9; background: var(--navy-deep); }
.card-media img, .card-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.play { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.play-icon {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(11, 20, 64, .62); border: 1.5px solid var(--gold-bright);
  transition: background-color .3s, scale .3s;
}
.play:hover .play-icon, .play:focus-visible .play-icon { background: rgba(11, 20, 64, .82); scale: 1.06; }
.play-icon svg { width: 22px; height: 22px; margin-left: 3px; fill: var(--gold-bright); }
.card-body { padding: 1.1rem 1.25rem 1.3rem; }
.card h3 { font-size: 1.5rem; line-height: 1.2; }
.card time { display: block; margin-top: .35rem; font-size: .9rem; color: var(--navy-soft); }

.ph { display: grid; place-items: center; padding: 1.25rem; text-align: center; color: #fdf3df; font-family: var(--font-head); font-size: 1.4rem; font-weight: 600; line-height: 1.2; }
.ph-0 { background: linear-gradient(135deg, #1f4e79, #1a2a6c 60%, #3b2a7a); }
.ph-1 { background: linear-gradient(135deg, #5a2a7a, #a63d6f 70%, #e07a5f); }
.ph-2 { background: linear-gradient(135deg, #0f5a64, #2b8a8f 60%, #6cc5b0); }
.ph-3 { background: linear-gradient(135deg, #3a4f2a, #6a8f3a 60%, #c9b458); }
.ph-4 { background: linear-gradient(135deg, #1b1f5a, #4a3d9a 60%, #d98fb3); }
.ph-5 { background: linear-gradient(135deg, #7a2f2f, #c4623f 60%, #f0b060); }
.ph-note { font-family: var(--font-body); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; margin-top: .6rem; display: block; }

.more { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }
.status { text-align: center; color: var(--navy-soft); grid-column: 1 / -1; }

/* ---------- Contact ---------- */
.contact-card {
  max-width: 640px; margin-inline: auto;
  background: var(--paper); border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 20px; box-shadow: var(--shadow); padding: clamp(1.5rem, 5vw, 2.75rem);
}
form { display: grid; gap: 1.1rem; }
label { display: grid; gap: .35rem; font-weight: 700; font-size: .95rem; }
input, textarea {
  font: inherit; font-weight: 400; color: var(--navy); width: 100%;
  background: rgba(255, 255, 255, .85); border: 1px solid rgba(20, 32, 77, .22);
  border-radius: 10px; padding: .8rem 1rem;
}
textarea { min-height: 9rem; resize: vertical; }
input:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
.field-error { font-weight: 400; font-size: .9rem; color: #9b2f45; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #9b2f45; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { min-height: 1.5em; margin: 0; text-align: center; font-size: 1rem; }
form .btn { justify-self: center; }

/* ---------- Footer ---------- */
.site-footer { padding: 2.5rem 0 3rem; font-size: .95rem; color: var(--navy-soft); border-top: 1px solid var(--line); margin-top: 2rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; align-items: center; }
.site-footer nav { display: flex; gap: 1.5rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }

/* ---------- Journeys page heading ---------- */
.page-head { text-align: center; padding: clamp(2rem, 6vw, 4rem) 0 0; }
.page-head h1 { font-size: clamp(2.6rem, 6vw, 4rem); }
.page-head p { color: var(--navy-soft); max-width: 34em; margin: 1rem auto 0; font-size: 1.1875rem; }

@media (max-width: 520px) {
  body { font-size: 1.0625rem; }
  .nav { gap: 1rem; font-size: .95rem; }
  .wordmark { font-size: 1.3rem; }
  .btn { padding: .9rem 1.25rem; }
  .hero-art { border-radius: 16px; }
}

/* Very narrow screens: brand above the links (both centred) so they never crowd or overflow. */
@media (max-width: 380px) {
  .site-header { padding-block: .75rem; }  /* keeps the pinned header slim when stacked */
  .wordmark { line-height: 1.6; }  /* a little air between the stacked brand and links */
  .site-header .wrap { flex-direction: column; gap: .15rem; }
}