/* Cami · Dusk into stars
   One stylesheet for the whole site. Colours, type and spacing live here as variables.
   The sky deepens from pink to violet to night as you scroll down the page. */

:root {
  /* the sky */
  --dusk: #E8A1A8;
  --rose: #F2B6B9;
  --orchid: #D6A2C8;
  --lavender: #BBA3DC;
  --violet: #5B4B8A;
  --deep: #3B3068;
  --dusk-night: #2E2654;
  --night-2: #231D41;
  --night: #1E1934;
  --moss: #5E6B3A;

  /* text */
  --ink: #2A1E2C;      /* on pink, orchid, lavender */
  --light: #FBF1EE;    /* on violet and darker only */

  /* type */
  --display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* space */
  --gutter: clamp(20px, 5vw, 72px);
  --section: clamp(80px, 11vw, 140px);
  --wide: 1200px;

  /* shape: every picture is an arched window */
  --arch: 999px 999px 24px 24px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { opacity: .85; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.05; }
p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }
.italic { font-style: italic; }

.wrap { max-width: var(--wide); margin: 0 auto; }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 10;
  background: var(--ink); color: var(--light); padding: 10px 16px; border-radius: 8px;
}
.skip:focus { left: 8px; }

/* ---------- buttons ---------- */
.button {
  display: inline-block;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  text-decoration: none;
  background: var(--ink);
  color: var(--light);
  min-height: 48px;
}
.button.on-night { background: var(--rose); color: var(--ink); font-weight: 600; }
.button.small { padding: 12px 20px; font-size: 16px; }

/* ---------- header ---------- */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px;
  padding: 20px var(--gutter);
  color: var(--light);
}
.site-header.on-light { position: static; color: var(--ink); background: var(--dusk); }
.logo {
  font-family: var(--display); font-style: italic; font-size: 34px; line-height: 1;
  text-decoration: none;
}
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-size: 16px; }
.site-nav a { text-decoration: none; padding: 6px 0; }
.site-nav .lang { opacity: .9; }
.site-nav .lang a[aria-current="true"] { text-decoration: underline; }
@media (max-width: 760px) {
  .site-nav .secondary { display: none; }
}

/* ---------- 1 · opening: pink sky + forest video ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--dusk);
  padding: 120px var(--gutter) clamp(64px, 8vw, 96px);
}
.hero-sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,30,44,.38) 0%, rgba(232,161,168,.12) 42%, var(--dusk) 100%);
}
.hero-inner {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap-reverse; align-items: flex-end; gap: 40px 56px;
  max-width: 1296px; margin: 0 auto;
}
.hero-text { flex: 999 1 480px; min-width: 0; }
.hero h1 { font-size: clamp(44px, 6.4vw, 96px); line-height: 1.02; letter-spacing: -0.01em; }
.hero h1 .italic { display: block; margin-top: .12em; }
.hero .lead { margin: 28px 0 0; max-width: 520px; font-size: 19px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.hero-video {
  flex: 1 1 260px; max-width: 400px; margin: 0 auto;
  aspect-ratio: 9 / 16; border-radius: var(--arch); overflow: hidden;
  background: var(--moss); box-shadow: 0 30px 60px rgba(42,30,44,.25);
}
.hero-video video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .hero { padding-top: 96px; }
  .hero-video { max-width: 260px; }
}

/* ---------- 2 · manifesto ---------- */
.manifesto {
  background: linear-gradient(180deg, var(--dusk) 0%, var(--orchid) 100%);
  padding: var(--section) var(--gutter);
}
.manifesto-text {
  max-width: 860px; margin: 0 auto; text-align: center;
  font-family: var(--display); font-size: clamp(26px, 3vw, 40px); line-height: 1.35;
}
.manifesto-text p { margin: 0 0 36px; }
.manifesto-text p:last-child { margin: 0; }

/* ---------- 3 · story ---------- */
.story {
  background: linear-gradient(180deg, var(--orchid) 0%, var(--lavender) 100%);
  padding: 24px var(--gutter) var(--section);
}
.split { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 64px; }
.split > .text { flex: 999 1 420px; min-width: 0; max-width: 620px; }
.arch-photo {
  flex: 1 1 300px; max-width: 480px; width: 100%;
  aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--arch);
}
.story h2, .page-intro h1 { font-size: clamp(36px, 4.2vw, 58px); line-height: 1.1; margin-bottom: 24px; }
.text-link { font-weight: 500; }

/* the moment the sky turns: no text here */
.sky-turn { height: clamp(120px, 14vw, 200px); background: linear-gradient(180deg, var(--lavender) 0%, var(--violet) 100%); }

/* ---------- 4 · Reactivation ---------- */
.session {
  background: linear-gradient(180deg, var(--violet) 0%, var(--deep) 100%);
  color: var(--light);
  padding: 24px var(--gutter) var(--section);
}
.session h2 { font-size: clamp(52px, 6.4vw, 92px); line-height: 1; }
.subtitle { margin-top: 10px; font-family: var(--display); font-style: italic; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; }
.session-body { display: flex; flex-wrap: wrap; gap: 48px 64px; margin-top: 56px; }
.session-body > div, .steps { flex: 1 1 380px; min-width: 0; }
.session-body .for { font-size: 20px; }
.not-for { opacity: .88; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { padding: 16px 0; border-top: 1px solid rgba(251,241,238,.25); }
.steps li:last-child { border-bottom: 1px solid rgba(251,241,238,.25); }
.steps strong { font-weight: 600; }
.booking {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 56px; padding: 28px 32px; border-radius: 24px; background: rgba(251,241,238,.1);
}
.booking p { margin: 0; font-size: 18px; }
.terms { margin-top: 16px; font-size: 15px; opacity: .85; }

/* ---------- stars (night sections) ---------- */
.stars {
  background-image:
    radial-gradient(1.6px 1.6px at 8% 12%, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 22% 40%, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 35% 18%, #ffe9f0 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 48% 62%, #fff 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 61% 28%, #fff 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 72% 74%, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 84% 16%, #fff3d6 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 92% 52%, #fff 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 14% 82%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 56% 88%, #fff 50%, transparent 52%);
  background-size: 520px 420px;
}
@keyframes twinkle { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.twinkle { animation: twinkle 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .twinkle { animation: none; } }

/* ---------- 5 · gatherings and the series ---------- */
.ways { background-color: var(--dusk-night); color: var(--light); padding: var(--section) var(--gutter); }
.ways h2 { font-size: clamp(40px, 4.6vw, 64px); }
.ways .subtitle { margin-bottom: 24px; }
.more { display: flex; flex-wrap: wrap; gap: 24px 48px; margin-top: 88px; }
.more > div { flex: 1 1 340px; min-width: 0; padding-top: 28px; border-top: 1px solid rgba(251,241,238,.3); }
.more h3 { font-size: 32px; font-weight: 500; margin-bottom: 8px; }

/* ---------- 6 · questions ---------- */
.faq { background-color: var(--night-2); color: var(--light); padding: var(--section) var(--gutter); }
.faq h2 { font-size: clamp(36px, 4vw, 52px); margin-bottom: 32px; }
.faq-list { max-width: 820px; }
.faq details { border-top: 1px solid rgba(251,241,238,.25); }
.faq details:last-child { border-bottom: 1px solid rgba(251,241,238,.25); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--display); font-size: 26px; line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-family: var(--text); font-size: 24px; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 24px; max-width: 680px; }

/* ---------- 7 · closing ---------- */
.site-footer { background-color: var(--night); color: var(--light); padding: var(--section) var(--gutter) 48px; text-align: center; }
.closing { font-family: var(--display); font-size: clamp(30px, 3.4vw, 48px); line-height: 1.3; margin: 0; }
.rakatoouum-note { margin: 20px auto 0; max-width: 520px; font-size: 15px; opacity: .85; }
.contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin-top: 72px; font-size: 16px; }
.small-print { margin-top: 32px; font-size: 13px; opacity: .7; }

/* ---------- My story page ---------- */
.page-intro { background: linear-gradient(180deg, var(--dusk) 0%, var(--orchid) 100%); padding: 72px var(--gutter) var(--section); }
.story-text { font-size: 19px; }
.story-text .pause { font-family: var(--display); font-style: italic; font-size: clamp(30px, 3vw, 40px); line-height: 1.2; margin: 40px 0; }
.page-continue { background: linear-gradient(180deg, var(--orchid) 0%, var(--lavender) 100%); padding: 0 var(--gutter) var(--section); }
.photo-row { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; margin-top: 64px; }
.photo-row img { flex: 1 1 260px; max-width: 360px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--arch); }