/* ─────────────────────────────────────────────────────────────
   CREATION SONGS — storybook journey
   Full-width painterly colour bands, content centred, printed on
   warm artist paper. One signature buttery brushstroke. Quiet
   everywhere else. (Design refinement — 01 Jul 2026)
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Signature palette (authoritative) ── */
  --ivory:    #F6E9D8;   /* warm ivory — default page paper            */
  --gold:     #E7C56A;   /* buttery gold — brushstroke                 */
  --gold-hi:  #F1D684;   /* lit edge of the gouache                    */
  --gold-lo:  #DBB752;   /* settled, heavier paint                     */
  /* ── Official button colours ── */
  --sun:      #F7C76B;   /* Creation Songs Sun Gold — every primary button */
  --sun-lo:   #EFB84E;   /* settled sun gold — button hover            */
  --sage:     #A9B89A;   /* eucalyptus — "What Is" band                */
  --sage-lo:  #9FAF8F;   /* tonal variation within the sage           */
  --apricot:  #EDD5C3;   /* soft apricot — "Behind the Songs" band     */
  --dove:     #A7C0D8;   /* dove blue — dusk in the mountain footer    */
  --dusk:     #6E8298;   /* deepest mountain tone (logo reads on this) */
  --lavender: #B8AEC6;
  --lavender-dove: #A792D8;  /* Listen — a brighter, more confident lavender-blue */
  --navy:     #5F6F87;   /* storybook navy — headings, links, buttons  */
  --navy-hi:  #6E7E96;   /* button hover (lightened navy)              */
  --navy-deep:#55657D;   /* the title — confident, less faded          */
  --navy-mission:#39465E;/* Mission band — deep, warm storybook navy:
                            worn book cloth / twilight, not corporate    */

  /* reading ink — storybook navy site-wide (user, 17 Jul 2026), so body
     copy matches the headings; the soft tone is a lighter navy for
     eyebrows, placeholders and quiet captions */
  --ink:      #5F6F87;
  --ink-soft: #7E8DA3;

  --paper:    #FCF6EA;   /* warm cream card — a hair lighter than the page */

  --wrap:     1140px;
  --measure:  720px;   /* comfortable reading column */

  /* the brand's own hand-painted alphabet, built from Hannah's painted
     letter sheets; Fraunces stands in for anything it doesn't carry */
  --hand: 'Creation Songs Hand', 'Fraunces', Georgia, serif;
}

/* ── CREATION SONGS HAND ──
   Vectorised from brand_assets/fonts/font_header_title_*.PNG. Display
   weight only: page titles and section headings. */
@font-face {
  font-family: 'Creation Songs Hand';
  src: url('brand_assets/fonts/creation-songs-hand.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* The painted mountain footer is the end of the book: no rubber-band scroll
     past it into bare paper at either end of the page. */
  overscroll-behavior-y: none;
  background-color: var(--ivory);
}

body {
  position: relative;
  min-height: 100vh;
  overscroll-behavior-y: none;
  background-color: var(--ivory);
  font-family: 'Lato', sans-serif;
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Artist-paper tooth ──
   A near-imperceptible fine grain laid over the whole page so every
   colour reads as printed on cold-press paper. ~4%, no visible
   repeat, no fibres. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.04;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── FULL-WIDTH BANDS ───
   The coloured field spans the browser; the content does not. */
.band {
  position: relative;
  width: 100%;
}
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: clamp(1.25rem, 5vw, 2.5rem);
  padding-right: clamp(1.25rem, 5vw, 2.5rem);
}
.band-ivory   { background: var(--ivory); }
.band-apricot { background: var(--apricot); }
/* Eucalyptus carries a soft painterly tonal variation — radials kept
   centred and faded to transparent well before the edges, so the band's
   top and bottom stay pure --sage and meet the adjoining fades seamlessly
   (no hard seam where overlays would otherwise reach the boundary). */
.band-sage {
  background:
    radial-gradient(70% 48% at 30% 40%, rgba(255,255,255,0.08), rgba(255,255,255,0) 72%),
    radial-gradient(80% 52% at 76% 64%, rgba(86,100,76,0.12), rgba(86,100,76,0) 72%),
    var(--sage);
}

/* ── Gentle colour transitions between bands ──
   Soft wedges so colours melt rather than butt against one another. Each
   wedge's end-stops MUST equal the flat edge colour of the band on either
   side, or a visible line appears at the seam. */
.fade {
  width: 100%;
  height: clamp(120px, 15vw, 200px);
  pointer-events: none;
}
.fade-ivory-sage  { background: var(--ivory); }
/* Slim melt from the ivory album gallery down into the navy mission band —
   keeps the two from butting against a hard seam while staying compact. */
.fade-ivory-navy {
  height: clamp(48px, 7vw, 90px);
  background: linear-gradient(180deg, var(--ivory) 0%, var(--navy) 100%);
}

/* ─── RESERVED ILLUSTRATION SPACES ───
   Intentional breathing room kept for painted artwork dropped in
   later. No boxes, no dividers — only an organic colour transition,
   so the eventual illustration reads as painted onto the paper. */
.reserve { width: 100%; pointer-events: none; }
.reserve-garden {          /* garden breather, between Our Mission and Behind the Songs */
  position: relative;
  z-index: 2;
  /* a shallow strip of dove sky above the plants, so the whole garden sits low —
     nearer to Behind the Songs than to Our Mission — with the soil bed resolving
     into the ivory paper at the base */
  padding-top: clamp(1.25rem, 3.5vw, 2.75rem);
  background: linear-gradient(180deg,
    var(--dove)  0%,
    var(--dove) 58%,
    var(--ivory) 100%);
}
/* the painterly garden: sprouts growing from a soil bed, its base flush to the
   bottom so the ground meets the cream paper of Behind the Songs below */
.garden-art {
  display: block;
  /* zoomed so the soil bed bleeds slightly past both page edges
     (user, 17 Jul 2026) — the overflow is clipped by the body */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 106vw;
  max-width: none;
  height: auto;
  pointer-events: none;
}
.reserve-river {           /* reserved river breather, before Join the Song */
  /* taller at desktop widths so the full-bleed stroke has more of its own
     room and intrudes less deeply into the neighbouring copy */
  height: clamp(170px, 22vw, 400px);
  background: var(--ivory);
  position: relative;
  /* Lifted above the neighbouring cream bands so the stroke, which is taller
     than this breather, sweeps freely over both — its bristled top and bottom
     edges are never painted over by the opaque section that follows. The text
     columns of those sections are in turn lifted above the stroke (below), so
     the paint always passes BEHIND the words. */
  z-index: 3;
}
/* the copy on either side of the river reads in front of the stroke … */
#behind .wrap, #join .wrap {
  position: relative;
  z-index: 4;
}
/* … and carries a soft ivory halo, so words crossing the blue paint stay
   readable — invisible where the text sits on plain paper */
#behind .body-copy p, #join .heading {
  text-shadow:
    0 0 6px  rgba(246, 233, 216, 0.95),
    0 0 14px rgba(246, 233, 216, 0.85),
    0 0 26px rgba(246, 233, 216, 0.7);
}
/* the dove-blue river brushstroke, painted across the transition */
.river-art {
  position: absolute;
  left: 50%; top: 50%;
  /* tilted so the stroke runs from upper left down to lower right, painted
     ~15% larger and carried a little nearer the section below */
  transform: translate(-50%, -40%) rotate(7deg);
  width: 122vw;
  height: auto;
  pointer-events: none;
}

/* ─── NAV ───
   Right-aligned, navy anchors. A whisper of ivory once scrolled. */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 1.15rem clamp(1.25rem, 4vw, 2.75rem);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  transition: background 0.4s ease;
}
#nav.scrolled { background: rgba(246, 233, 216, 0.82); backdrop-filter: blur(10px); }

.nav-links { display: flex; gap: clamp(1.25rem, 3vw, 2.25rem); list-style: none; }
.nav-links a {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.2s ease, color 0.25s ease;
}
.nav-links a:hover { opacity: 1; color: var(--navy-deep); }
.nav-links a:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; border-radius: 3px; }

/* Hamburger — the only nav control, at every width and on every page.
   Three navy bars that fold into an X. */
.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none; border: none;
  padding: 8px; border-radius: 8px;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--navy); border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The links live in a quiet ivory drawer beneath the toggle. */
.nav-links {
  position: absolute;
  top: 100%; right: clamp(1.25rem, 4vw, 2.75rem);
  flex-direction: column;
  gap: 0;
  background: rgba(246, 233, 216, 0.97);
  backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 0.5rem 0;
  min-width: 208px;
  box-shadow: 0 18px 40px -22px rgba(95, 111, 135, 0.5);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-links a { display: block; padding: 0.78rem 1.5rem; opacity: 0.9; }
.nav-links a:hover { background: rgba(95, 111, 135, 0.07); }

/* ─── HERO ───
   The painted sun-gold morning wash fills the top of the page. The
   hand-painted wordmark rides HIGH and SMALL inside it — the brand signing
   the page rather than announcing it (user, 26 Jul 2026) — leaving open sky
   beneath before the gallery. The wash's own base fades to white; a final
   gradient veil melts that white into the ivory paper so the albums below
   sit on the same page. */
.hero {
  /* open morning sky: enough field for the wash to run through its own fade,
     with the small wordmark sitting near the top of it */
  min-height: clamp(280px, 33vh, 400px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: clamp(4.5rem, 10vh, 6.25rem) clamp(1.5rem, 5vw, 3rem) clamp(2rem, 5vh, 3.5rem);
  position: relative;
  background:
    url("brand_assets/new_header_BG_web.jpg") center top / cover no-repeat,
    var(--ivory);
}
/* melt the wash's white base into the ivory paper below */
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(70px, 10vw, 130px);
  background: linear-gradient(180deg, rgba(246, 233, 216, 0) 0%, var(--ivory) 100%);
  pointer-events: none;
  z-index: 0;
}
.hero-title {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}
/* The watercolour wordmark — held to roughly half its previous size so the
   album covers below become the page's first real focus. */
.hero-wordmark {
  display: block;
  width: min(300px, 62vw);
  height: auto;
}
.hero-scroll {
  position: absolute;
  bottom: 1.75rem; left: 50%;
  transform: translateX(-50%);
  opacity: 0.7;
  color: var(--navy);
  animation: bob 2.6s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}
@media (max-width: 680px) { .hero-scroll { display: none; } }

/* ─── BUTTONS ───
   One consistent button, handcrafted and warm: signature buttery gold with
   storybook-navy lettering, softly rounded. No gradient, no shadow, no gloss.
   Hover lifts ~2px and settles the paint a touch deeper. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  background: var(--sun);
  padding: 1rem 2.4rem;
  min-height: 52px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.22s ease, background 0.22s ease;
}
.btn:hover  { transform: translateY(-2px); background: var(--sun-lo); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }

/* ─── SHARED TYPE ─── */
.eyebrow {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
/* Section headings are painted in the brand's own alphabet. The hand runs
   condensed and tall, so it is set a size up from the old Fraunces setting
   with tracking opened slightly and no negative letter-spacing. */
.heading {
  font-family: var(--hand);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.05rem);
  line-height: 1.14;
  letter-spacing: 0.005em;
  color: var(--navy);
}
/* interior-page subsection headings — pulled back ~13% for a calmer hierarchy */
.heading-sm { font-size: clamp(1.35rem, 3.25vw, 1.9rem); }
.lede {
  font-family: 'Lato', sans-serif;
  font-size: clamp(1.08rem, 2.6vw, 1.24rem);
  line-height: 1.85;
  color: var(--ink);
  margin-top: 1.6rem;
  /* long-form paragraphs set justified — square text blocks (user, 17 Jul 2026) */
  text-align: justify;
}
.body-copy { margin-top: 1.5rem; }
.body-copy p {
  font-family: 'Lato', sans-serif;
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  line-height: 1.9;
  color: var(--ink);
  margin-bottom: 1.2rem;
  text-align: justify;
}
.body-copy p:last-child { margin-bottom: 0; }
.center  { text-align: center; }
.measure { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a.inline-link, .body-copy a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color 0.2s ease;
}
a.inline-link:hover, .body-copy a:hover { color: var(--navy-deep); }
.body-copy a:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 3px; }

/* Section vertical rhythm — every band its own storybook page. */
.section-pad { padding-top: clamp(5rem, 11vw, 9rem); padding-bottom: clamp(5rem, 11vw, 9rem); }
/* The songs gallery opens with the catchphrase and carries the page, so it
   gets room above as well as full breathing space below before the mission. */
.section-songs { padding-top: clamp(2.25rem, 5vw, 4rem); padding-bottom: clamp(5rem, 11vw, 9rem); }
/* Join the Song is the last content section — trim its lower breathing room ~30%
   so the footer landscape isn't preceded by such a large empty gap. */
#join { padding-bottom: clamp(3.5rem, 7.7vw, 6.3rem); }

/* On the sage band, type turns to ivory; the colour alone sets the mood. */
.band-sage .heading,
.band-sage .eyebrow,
.band-sage .lede,
.band-sage .body-copy p { color: var(--ivory); }
.band-sage .eyebrow { opacity: 0.85; }

/* Behind the Songs — the founder's story rendered entirely in Storybook Navy. */
#behind .body-copy p { color: var(--navy); }

/* ── OUR MISSION — the heart of the brand, its own chapter ──
   A clean colour break: the ivory album gallery butts straight against a deep,
   warm storybook navy — no gradual melt above, so the eye arrives at a distinct
   page. A faint painted glow softens the top edge. The band then melts down
   through dusk into a dove sky, leading into the garden breather below. */
#about {
  background:
    radial-gradient(130% 60% at 50% 0%, rgba(255,255,255,0.10), rgba(255,255,255,0) 52%),
    linear-gradient(180deg,
      var(--navy-mission)  0%,
      var(--navy-mission) 44%,
      var(--dusk) 74%,
      var(--dove) 100%);
  padding-top: clamp(4.5rem, 9vw, 7rem);
  /* extra room before the garden breather so the illustration has space
     to arrive (user, 26 Jul 2026) */
  padding-bottom: clamp(6rem, 12.5vw, 10rem);
}
#about .eyebrow { color: var(--ivory); opacity: 0.82; }
#about .heading { color: var(--ivory); }
#about .lede    { color: var(--ivory); }
/* Fine noise dither laid over the tall navy→dusk→dove melt (and its
   continuation through the garden breather) — breaks the 8-bit gradient
   steps that read as visible banding on large screens. */
#about::after,
.reserve-garden::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#about { position: relative; }
#about .wrap { position: relative; z-index: 1; }
/* the garden art keeps painting above the breather's dither veil */
.reserve-garden .garden-art { z-index: 1; }

/* ─── ALBUMS — gallery ───
   No frames, no chrome. The covers are the artwork and provide the
   colour; whitespace gives them room. */

/* The catchphrase heads the gallery — the page's primary message, and the only
   heading on the site set in Fraunces rather than the painted hand, because it
   speaks for the whole page rather than labelling a section. Letterspaced caps,
   held to one line: an exhibition title above the plates. */
.songs-statement {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: clamp(1.02rem, 2.5vw, 1.62rem);
  line-height: 1.5;
  color: var(--navy);
  opacity: 0.88;
  text-align: center;
  text-wrap: balance;
  margin-bottom: clamp(2.75rem, 6vw, 4.5rem);
}
/* Snugger tracking and size on narrow phones so the line never wraps. */
@media (max-width: 460px) {
  .songs-statement { letter-spacing: 0.09em; font-size: clamp(0.78rem, 3.6vw, 0.95rem); }
}

/* One release to a plate, stacked down a single centred column: large cover,
   then its title and call to action gathered tightly beneath it. The gap
   between releases is several times the gap inside one, so each album reads as
   its own moment rather than a row in a catalogue. */
.albums-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4.5rem, 10vw, 9rem);
  margin: 0 auto;
}
.album {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.35rem, 2.8vw, 1.85rem);
}
.album-art {
  width: min(460px, 82vw);
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  /* layered, colour-tinted lift so the artwork reads as a printed sleeve
     resting on the paper rather than a flat tile */
  box-shadow:
    0 2px 6px -3px rgba(95, 111, 135, 0.30),
    0 30px 60px -34px rgba(95, 111, 135, 0.55);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.album-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album:hover .album-art { transform: translateY(-4px); }
.album-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(0.85rem, 1.8vw, 1.2rem);
}
.album-name {
  font-family: var(--hand);
  font-weight: 400;
  /* a gallery caption under the plate: pulled back so the artwork above and the
     catchphrase heading both stay ahead of it. Held to a single line at every
     width — the size gives way before the title is ever allowed to wrap. */
  font-size: clamp(1.3rem, 4.2vw, 2.05rem);
  letter-spacing: 0.01em;
  color: var(--navy);
  line-height: 1.12;
  white-space: nowrap;
}
/* Album call-to-action — the same buttery button language as the rest of the
   site, so it reads as a proper pressable button rather than a caption. Speaks
   "Coming Soon" for now; swaps to a live Spotify link (drop .is-soon, make it
   an <a>) once the song is out. */
.album-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  background: var(--sun);
  padding: 0.85rem 1.9rem;
  min-height: 46px;
  white-space: nowrap;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.22s ease, background 0.22s ease;
}
.album-btn:hover  { transform: translateY(-2px); background: var(--sun-lo); }
.album-btn:active { transform: translateY(0); }
.album-btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
/* not-yet-released: the same sun-gold button, quietly dimmed so it reads as
   awaiting release rather than an active call to action */
.album-btn.is-soon {
  opacity: 0.62;
  cursor: default;
}
.album-btn.is-soon:hover  { transform: none; background: var(--sun); }
.album-btn.is-soon:active { transform: none; }
@media (max-width: 560px) {
  .album-btn { padding: 0.72rem 1.5rem; font-size: 0.66rem; min-height: 42px; }
}

/* ─── JOIN THE SONG — three equal pathways ───
   An invitation, not a fundraiser. Three matching warm cream paper cards of
   equal weight and spacing. The painterly icons sit quietly above as supporting
   illustration; whitespace does the rest. */
.pathways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(2.75rem, 5vw, 3.75rem);
  align-items: stretch;
}
/* Prototyped three-abreast on mobile — but at phone widths the copy collapsed
   to one word per line and the titles/buttons wrapped, so we keep the approved
   single stacked column, which stays comfortably readable. */
@media (max-width: 860px) {
  .pathways { grid-template-columns: 1fr; gap: 1.75rem; max-width: 440px; margin-left: auto; margin-right: auto; }
}

.pathway {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--paper);
  border-radius: 20px;
  padding: clamp(2.25rem, 4vw, 3rem) clamp(1.75rem, 3.5vw, 2.5rem);
  /* one extremely soft, colour-tinted shadow — no visible border */
  box-shadow: 0 18px 40px -28px rgba(95, 111, 135, 0.35);
}
/* painterly brand icon — supporting illustration, generous air around it.
   Reduced ~35% from the earlier size so it stays quietly secondary. */
.pathway-icon {
  width: clamp(34px, 5vw, 46px);
  height: clamp(34px, 5vw, 46px);
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pathway-icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* The "Listen" note is recoloured to Lavender Dove: the painterly PNG is used
   as a mask over a flat fill, so the silhouette reads in exactly #B3B1C8. */
.pathway-icon--note {
  background-color: var(--lavender-dove);
  -webkit-mask: url("brand_assets/join_music_note.png") no-repeat center / contain;
          mask: url("brand_assets/join_music_note.png") no-repeat center / contain;
}
.pathway-title {
  font-family: var(--hand);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.7vw, 1.62rem);
  letter-spacing: 0.01em;
  color: var(--navy);
  margin-bottom: 0.75rem;
}
.pathway-copy {
  font-family: 'Lato', sans-serif;
  font-size: clamp(0.98rem, 2vw, 1.05rem);
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: 1.75rem;
  max-width: 30ch;
}
.pathway .btn,
.pathway .signup { margin-top: auto; }

/* Stay Connected — the field and its button share one bordered shell, so the
   two read as a single signup component rather than two stacked elements. */
.signup {
  display: flex;
  align-items: center;
  width: 100%;
  background: #FFFDF8;
  border: 1.5px solid rgba(95, 111, 135, 0.25);
  border-radius: 14px;
  padding: 5px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.signup:focus-within {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(95, 111, 135, 0.14);
}
.signup input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  font-family: 'Lato', sans-serif;
  font-size: 0.96rem;
  color: var(--ink);
  background: transparent;
  border: none;
  padding: 0 0.35rem 0 0.75rem;
  min-height: 46px;
}
.signup input[type="email"]::placeholder { color: var(--ink-soft); opacity: 0.8; }
.signup input[type="email"]:focus { outline: none; }
/* the button rests inside the shell at its right-hand end */
.signup .btn {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 1.15rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  border-radius: 10px;
}
.signup .btn:hover  { transform: none; background: var(--sun-lo); }
.signup .btn:active { transform: none; }
.signup .btn:focus-visible { outline-offset: 2px; }

/* ─── MOUNTAIN FOOTER ───
   The page settles into a painterly dusk landscape — no borders, no
   boxed footer. Reserved height up top for the eventual mountain
   illustration; quiet imprint resting in the deeper tone below.
   The ivory wordmark reads against the dusk. */
.mountain {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* an open ivory sky settling gently down into dusk; the enlarged range rests
     across the bottom and becomes the footer itself */
  background: linear-gradient(180deg,
    var(--ivory)   0%,
    #ECE7DB       24%,
    var(--dove)   62%,
    var(--dusk)  100%);
  /* the range sweeps up from the bottom edge; the footer content is pinned low,
     resting over the deep foothills at the very bottom of the page. Top sky
     trimmed ~30% so there's less empty cream above the peaks, then given back
     the height the removed CS mark used to occupy so the peaks keep their
     presence. */
  padding-top: clamp(238px, 28.5vw, 400px);
  padding-bottom: clamp(2rem, 4.5vw, 3.25rem);
}
/* a whisper of dusk gathered at the very base, so the quiet footer text reads
   over the pale foothills without disturbing the painting above */
.mountain::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60%;
  background: linear-gradient(180deg,
    rgba(85, 101, 125, 0) 0%,
    rgba(85, 101, 125, 0.20) 38%,
    rgba(85, 101, 125, 0.58) 72%,
    rgba(85, 101, 125, 0.84) 100%);
  z-index: 0;
  pointer-events: none;
}
/* the painted mountain range — enlarged and lowered so it settles across the
   base of the page and spills naturally beyond both edges of the browser */
.mountain-art {
  position: absolute;
  bottom: 0; left: 50%;
  /* the master PNG carries ~8.7% empty transparency below the painted foothills;
     nudging it down by that much lands the painted base flush on the page's
     bottom edge, with the overflow clipped — no gap beneath the mountains */
  transform: translateX(-50%) translateY(8.7%);
  width: 124%;
  min-width: 1280px;
  height: auto;
  pointer-events: none;
  z-index: 0;
}
/* Atmospheric haze: an ivory veil laid over the range — opaque across the sky
   and the peak tips, thinning to nothing further down — so the mountains emerge
   softly from the cream, like distant peaks in mist. This dissolves the crisp
   painted silhouette entirely; there is no leading edge for the eye to catch. */
.mountain::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 58%;
  background: linear-gradient(180deg,
    var(--ivory) 0%,
    var(--ivory) 16%,
    rgba(246, 233, 216, 0) 100%);
  z-index: 1;
  pointer-events: none;
}
/* The footer content — links, socials, contact, copyright — rests low over the
   twilight foothills at the very bottom of the page. The CS mark was lifted
   from here (user, 26 Jul 2026): the brand is already established up the page,
   so the footer stays a quiet index rather than a second signature. Its four
   remaining lines are spaced a little more openly to hold the balance. */
.footer-quiet {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--ivory);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.95rem, 2.1vw, 1.35rem);
}

/* the footer links, centred as one balanced group at the head of the imprint */
.footer-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem 1.25rem;
  font-family: 'Nunito', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.footer-bar a {
  color: var(--ivory);
  opacity: 0.9;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.footer-bar a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.footer-bar a:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; border-radius: 3px; }

/* social icons — small, understated, in ivory so they read on the dusk range */
.footer-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--ivory);
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.footer-social a svg { width: 17px; height: 17px; display: block; }
.footer-social a:hover { opacity: 1; transform: translateY(-2px); }
.footer-social a:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 3px;
}

/* the address itself, set in the footer's own quiet voice rather than
   hidden behind the word "contact" */
.footer-email {
  font-family: 'Nunito', sans-serif;
  font-size: 0.79rem;
  letter-spacing: 0.045em;
  color: var(--ivory);
  opacity: 0.76;
  text-decoration: none;
  border-bottom: 1px solid rgba(246, 233, 216, 0.32);
  padding-bottom: 1px;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.footer-email:hover { opacity: 1; border-bottom-color: rgba(246, 233, 216, 0.7); }
.footer-email:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; border-radius: 3px; }

/* the quiet copyright line, resting at the base of the footer content */
.footer-copyright {
  font-family: 'Nunito', sans-serif;
  color: var(--ivory);
  opacity: 0.72;
  font-size: 0.77rem;
  letter-spacing: 0.05em;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   SUB-PAGES (copyright, support) — same paper, no cards
   ═══════════════════════════════════════════════════════════════ */
/* Interior pages open on the same painted sun-gold morning wash as the
   homepage, so the site reads as one book wherever it is entered. */
.page-hero {
  position: relative;
  /* deep enough for the wash to run through its own fade, as it does on the
     homepage, rather than being cropped to its densest gold */
  min-height: clamp(360px, 44vh, 480px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(7.5rem, 16vh, 10.5rem) clamp(1.5rem, 5vw, 3rem) clamp(4rem, 9vw, 6.5rem);
  text-align: center;
  background:
    url("brand_assets/new_header_BG_web.jpg") center top / cover no-repeat,
    var(--ivory);
}
/* melt the wash's white base into the ivory paper below */
.page-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(70px, 10vw, 130px);
  background: linear-gradient(180deg, rgba(246, 233, 216, 0) 0%, var(--ivory) 100%);
  pointer-events: none;
  z-index: 0;
}
.page-hero > * { position: relative; z-index: 1; }
/* the page opened with its own generous wash, so the first block below it
   needs less of a run-up */
.page-hero + .flow { padding-top: clamp(1.5rem, 4vw, 2.75rem); }
/* a small painted mark heading an interior page */
.page-mark {
  display: block;
  margin: 0 auto;
  width: clamp(54px, 8vw, 78px);
  height: auto;
}
.page-title {
  font-family: var(--hand);
  font-weight: 400;
  /* pulled back ~13% from the old Fraunces setting so interior pages open
     a little more gently than the homepage wordmark */
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--navy-deep);
  margin-top: 0.6rem;
}
.page-intro {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 2.8vw, 1.45rem);
  line-height: 1.55;
  color: var(--navy);
  opacity: 0.9;
  max-width: 640px;
  margin: clamp(1rem, 2.5vw, 1.4rem) auto 0;
}

/* Plain centred content blocks on the ivory paper — no panels. */
.flow {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 2rem) clamp(4rem, 9vw, 6.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 5rem);
}
.block-inner { max-width: var(--measure); margin: 0 auto; }

/* Usage lists (copyright page) */
/* Stepped in from the introductory paragraphs so practical guidance reads
   as a distinct register from the explanation above it. */
.usage-list {
  list-style: none;
  margin-top: 1.6rem;
  margin-left: clamp(0.9rem, 4vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.usage-list li {
  font-family: 'Lato', sans-serif;
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  line-height: 1.55;
  color: var(--ink);
  padding-left: 2rem;
  position: relative;
}
.usage-list li::before {
  position: absolute;
  left: 0; top: 0.05em;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
}
.usage-yes li::before { content: '✓'; color: #6E7E57; }
.usage-no  li::before { content: '✕'; color: #C68A66; }

.ack { margin: 1.8rem auto 0; max-width: 480px; display: flex; flex-direction: column; gap: 0.7rem; }
.ack span {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.1rem);
  color: var(--navy);
  text-align: center;
}
.ack-or {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}
.cta-note {
  font-family: 'Nunito', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-top: 1rem;
}
.join-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(3.25rem, 6.5vw, 5rem);
}

/* ─── SCROLL REVEAL ─── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.08s; } .d2 { transition-delay: 0.16s; }
.d3 { transition-delay: 0.24s; } .d4 { transition-delay: 0.32s; } .d5 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}