/* ============================================================
   Lorabel site styles. Mobile first; wider screens add on top.
   Colours come only from tokens.css (the build checks).
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Phones rubber-band past the ends and show the canvas. The canvas is this
     background tiled from the html box, so the band ABOVE the page is the
     bottom of the previous tile and the band BELOW is the top of the next one.
     Cream first, then cocoa, therefore gives cocoa above the night hero and
     cream below the morning footer. Engines that ignore the image show the
     solid cocoa. */
  background: var(--cocoa) linear-gradient(var(--cream) 50%, var(--cocoa) 50%);
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--text);
  line-height: 1.55;
  color: var(--cocoa);
  background: transparent;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 400; }

:focus-visible { outline: 3px solid var(--cocoa); outline-offset: 3px; border-radius: 4px; }
.night :focus-visible { outline-color: var(--vanilla); }
.skip:focus-visible { outline-color: var(--cocoa); box-shadow: 0 0 0 3px var(--cream); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--vanilla); color: var(--cocoa); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.night { color: var(--cream); }
.morning { color: var(--cocoa); }

/* ------------------------------------------------------------
   The sky: three fixed layers, crossfaded by --dawn.
   Night sits underneath; dawn and morning fade in on top.
   Opacity only, so phones composite it without repainting.
   ------------------------------------------------------------ */
.sky { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.sky > i { position: absolute; inset: 0; will-change: opacity; }
.sky-night   { background: linear-gradient(180deg, var(--cocoa) 0%, var(--cocoa) 62%, var(--horizon) 100%); }
.sky-dawn    { background: linear-gradient(180deg, var(--dusk) 0%, var(--rose) 55%, var(--vanilla) 100%); opacity: clamp(0, calc(var(--dawn) * 1.9), 1); }
.sky-morning { background: linear-gradient(180deg, var(--vanilla) 0%, var(--cream) 42%, var(--cream) 100%); opacity: clamp(0, calc((var(--dawn) - 0.48) * 1.95), 1); }

.stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: clamp(0, calc(1 - var(--dawn) * 2.6), 1); }
.is-day .stars { display: none; }
.star {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--vanilla); opacity: .35;
  animation: twinkle var(--d, 5s) ease-in-out infinite alternate;
  animation-delay: var(--o, 0s);
}
.star:nth-child(2n) { width: 2px; height: 2px; }
.star:nth-child(1)  { left: 12%; top: 9%;  --d: 4.6s; }
.star:nth-child(2)  { left: 31%; top: 5%;  --d: 6.1s; --o: -2s; }
.star:nth-child(3)  { left: 52%; top: 13%; --d: 5.3s; --o: -1s; }
.star:nth-child(4)  { left: 58%; top: 3%;  --d: 7s;   --o: -3s; }
.star:nth-child(5)  { left: 86%; top: 16%; --d: 4.2s; --o: -.5s; }
.star:nth-child(6)  { left: 22%; top: 24%; --d: 6.6s; --o: -4s; }
.star:nth-child(7)  { left: 71%; top: 27%; --d: 5.8s; --o: -2.5s; }
.star:nth-child(8)  { left: 92%; top: 33%; --d: 6.9s; --o: -1.5s; }
.star:nth-child(9)  { left: 40%; top: 36%; --d: 4.9s; --o: -3.5s; }
.star:nth-child(10) { left: 8%;  top: 44%; --d: 7.4s; --o: -2.2s; }
.star:nth-child(11) { left: 64%; top: 46%; --d: 5.1s; --o: -1.2s; }
.star:nth-child(12) { left: 27%; top: 52%; --d: 6.3s; --o: -3.8s; }
@keyframes twinkle { to { opacity: .95; transform: scale(1.35); } }

/* Pages that start in the morning (privacy, not found) */
[data-day] { --dawn: 1; }

/* ------------------------------------------------------------
   Navigation
   ------------------------------------------------------------ */
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 72px;
}
.wordmark {
  font-family: var(--font-display); font-weight: 500; font-size: 27px; line-height: 1;
  letter-spacing: -0.01em; text-decoration: none; padding: 8px 0;
}
.nav-cta {
  font-weight: 600; font-size: 15px; text-decoration: none; padding: 12px 0;
  border-bottom: 1.5px solid transparent; transition: border-color .25s var(--ease-out);
}
.nav-cta:hover { border-bottom-color: currentColor; }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 30px; border: 0; border-radius: var(--r-pill);
  font: 600 17px/1 var(--font-text); text-decoration: none; cursor: pointer;
  background: var(--vanilla); color: var(--cocoa);
  transition: transform .18s var(--ease-out), background .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: scale(.98); }
.btn[aria-disabled="true"] { opacity: .7; cursor: default; }
.btn.day { background: var(--cocoa); color: var(--cream); }
.btn.day:hover { background: var(--btn-day-hover); }
.link { background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; padding: 10px 6px; text-decoration: underline; color: inherit; }

/* ------------------------------------------------------------
   Placeholders for photos and video. Clearly labelled, but made to
   look like silk so the page already feels like the brand.
   ------------------------------------------------------------ */
.ph {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-card); aspect-ratio: 4 / 5;
}
.ph::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 18% 8%, var(--ph-highlight) 0%, transparent 52%),
    radial-gradient(90% 70% at 85% 95%, var(--vanilla) 0%, transparent 58%),
    linear-gradient(160deg, var(--rose) 0%, var(--rose-tint) 55%, var(--vanilla) 100%);
}
.ph::after {
  content: ""; position: absolute; inset: -40%; z-index: -1;
  background: linear-gradient(115deg, transparent 38%, var(--sheen) 47%, transparent 56%, transparent 66%, var(--sheen-soft) 72%, transparent 80%);
}
.ph.night::before {
  background:
    radial-gradient(110% 80% at 20% 10%, var(--ph-night-glow) 0%, transparent 55%),
    radial-gradient(80% 60% at 85% 95%, var(--ph-night-warm) 0%, transparent 60%),
    linear-gradient(160deg, var(--dusk) 0%, var(--cocoa) 60%, var(--horizon) 100%);
}
.ph.night::after { background: linear-gradient(115deg, transparent 38%, var(--sheen-night) 47%, transparent 56%); }
.ph.wide { aspect-ratio: 4 / 3; }
.ph.square { aspect-ratio: 1; }
.ph-label {
  position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px);
  font-size: 12.5px; line-height: 1.35; padding: 7px 12px; border-radius: var(--r-pill);
  background: var(--label-bg); color: var(--cream);
}

/* ------------------------------------------------------------
   Hero (night)
   ------------------------------------------------------------ */
.hero {
  min-height: calc(100vh - 72px);
  min-height: calc(100svh - 72px);
  display: grid; align-content: start; gap: 28px;
  padding-top: 20px; padding-bottom: var(--section);
}
.hero-copy { display: grid; gap: 24px; justify-items: start; }
.hero h1 {
  font-family: var(--font-display); font-size: var(--h1); line-height: 1.02; letter-spacing: -0.015em;
}
.hero h1 span { display: block; }
.hero p { font-size: 1.06em; line-height: 1.5; max-width: 32ch; margin: 0; }
.hero-media { margin-top: 8px; animation: drift 9s ease-in-out infinite; }
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-6px) rotate(-.4deg); }
}

/* ------------------------------------------------------------
   The ritual (night): two moments, then the dawn is the third
   ------------------------------------------------------------ */
.ritual { padding-top: 8px; padding-bottom: 0; }
.title {
  font-family: var(--font-display); font-size: var(--h2); line-height: 1.06; letter-spacing: -0.012em;
  max-width: 18ch; margin: 0 0 20px;
}
.moments { display: grid; gap: 56px; margin-top: 36px; }
.moment { display: grid; gap: 18px; }
.moment-copy { display: grid; gap: 10px; order: -1; }
.time { font-weight: 600; font-size: 15px; margin: 0; }
.moment h3 { font-family: var(--font-display); font-size: clamp(32px, 8vw, 48px); line-height: 1; }
.moment p { margin: 0; max-width: 34ch; }

/* Hidden only when scripts can reveal it again. */
@media (scripting: enabled) {
  .reveal { opacity: 0; transform: translateY(14px); }
}
.reveal { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   The dawn: a tall section whose sticky stage fills the screen while
   the sky turns. The sun rises, then "Good morning." appears.
   ------------------------------------------------------------ */
.dawn { position: relative; height: 240vh; height: 240svh; }
.stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; place-items: center; overflow: hidden; text-align: center;
  padding: 0 var(--gutter);
}
.sun {
  --p: clamp(0, calc((var(--dawn) - 0.12) / 0.6), 1);
  width: min(58vw, 300px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--sun-core) 0%, var(--vanilla) 58%, var(--sun-edge) 100%);
  box-shadow: 0 0 90px 36px var(--sun-glow);
  transform: translateY(calc((1 - var(--p)) * 58vh));
  opacity: clamp(0, calc(var(--p) * 3), 1);
  will-change: transform, opacity;
}
.wake {
  --v: clamp(0, calc((var(--dawn) - 0.72) * 4.5), 1);
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0 var(--gutter);
  color: var(--cocoa); opacity: var(--v); transform: translateY(calc((1 - var(--v)) * 10px));
}
.wake > div { max-width: 28ch; }
.wake .time { margin-bottom: 10px; }
.wake h3 { font-family: var(--font-display); font-size: clamp(44px, 11vw, 88px); line-height: 1; letter-spacing: -0.015em; margin-bottom: 14px; }
.wake p { margin: 0; font-size: 1.06em; }

/* ------------------------------------------------------------
   Morning sections
   ------------------------------------------------------------ */
.morning section { padding-block: var(--section); }
.morning section + section { padding-top: 0; }

/* The Night Set */
.box .ph { margin: 24px 0 36px; }
.items { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.items li { display: grid; gap: 4px; }
.items b { font-weight: 600; }
.items p { margin: 0; max-width: 40ch; }
.gift {
  margin: 36px 0 0; max-width: 30ch;
  font-family: var(--font-display); font-style: italic; font-size: 1.4em; line-height: 1.25;
}

/* Silk, and no heat: a full-width band, one section of space on each side */
.silk { background: var(--rose-tint); }
.morning section.silk { padding-block: var(--section); margin-block: 0 var(--section); }
.silk .inner { display: grid; gap: 28px; }
.silk .copy p { font-size: 1.15em; line-height: 1.45; max-width: 32ch; }
.silk .copy p:last-child { margin-bottom: 0; }

/* The name */
.name { text-align: center; }
.name .word {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(64px, 18vw, 150px);
  line-height: 1; letter-spacing: -0.02em; margin-bottom: 20px;
}
.name p { margin: 0 auto 12px; max-width: 40ch; }
.name .say { font-family: var(--font-display); font-style: italic; font-size: 1.35em; }

/* The waitlist */
.waitlist .panel {
  background: var(--rose-tint); border-radius: var(--r-panel); padding: 32px 22px;
  max-width: 640px; margin-inline: auto;
}
.waitlist .title { max-width: 14ch; }
.waitlist .lead { max-width: 40ch; }
.form { display: grid; gap: 22px; margin-top: 26px; }
.field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > legend { padding-inline: 0; margin-block-end: 8px; }
.label { font-weight: 600; font-size: 15px; }
.hint { font-weight: 400; opacity: .85; }
.input {
  width: 100%; min-height: 56px; padding: 0 18px; border-radius: var(--r-input);
  border: 1.5px solid var(--line-input); background: var(--cream); color: var(--cocoa);
  font: inherit; font-size: 17px; transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.input:focus { border-color: var(--cocoa); box-shadow: 0 0 0 4px var(--focus-glow); }
.input[aria-invalid="true"] { border-color: var(--rose-deep); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  position: relative; flex: 1 1 auto; min-width: 96px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line-input); background: var(--cream);
  font-weight: 600; font-size: 15px; cursor: pointer;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .18s var(--ease-out);
}
.pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pill:has(input:checked) { background: var(--rose); border-color: var(--cocoa); box-shadow: inset 0 0 0 1.5px var(--cocoa); }
.pill:has(input:focus-visible) { outline: 3px solid var(--cocoa); outline-offset: 3px; }
.pill:active { transform: scale(.97); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-error {
  margin: 0; padding: 12px 14px; border-radius: var(--r-input); font-size: 15px;
  background: var(--error-bg);
}
.btn .busy { display: none; }
.form.is-busy .btn .label-text { display: none; }
.form.is-busy .btn .busy { display: inline; }
.fineprint { font-size: 13.5px; line-height: 1.45; margin: 0; opacity: .85; }
.form-done { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 16px 0 8px; }
.form-done h3 { font-family: var(--font-display); font-size: clamp(30px, 7vw, 40px); line-height: 1.08; margin-top: 6px; }
.form-done p { margin: 0; max-width: 34ch; }
.minisun {
  width: 72px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--sun-core), var(--vanilla) 60%, var(--sun-edge));
  box-shadow: 0 0 32px 10px var(--sun-glow);
  animation: rise .9s var(--ease-out) both;
}
@keyframes rise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.footer { padding-top: var(--section); padding-bottom: 40px; display: grid; gap: 18px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: center; }
.footer nav a, .footer nav .link {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: 15px; padding: 9px 0;
  border-bottom: 1.5px solid var(--line-day); line-height: 1.2;
}
.footer nav .link { padding-inline: 0; }
.footer nav a:hover, .footer nav .link:hover { border-bottom-color: currentColor; }
.footer p { margin: 0; font-size: 14.5px; opacity: .85; }
.footer .lang a { font-weight: 600; }

/* ------------------------------------------------------------
   The small pill that follows along on phones
   ------------------------------------------------------------ */
.sticky-cta {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 20;
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  min-height: 52px; padding: 0 26px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; background: var(--vanilla); color: var(--cocoa);
  font-weight: 600; font-size: 16px; text-decoration: none;
  box-shadow: 0 10px 30px var(--shadow);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.sticky-cta.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.sticky-cta:focus-visible { outline-color: var(--cocoa); box-shadow: 0 0 0 3px var(--cream), 0 10px 30px var(--shadow); }
.consent-open .sticky-cta { opacity: 0; pointer-events: none; }
@media (min-width: 1080px) { .sticky-cta { display: none; } }

/* ------------------------------------------------------------
   Cookie bar (only rendered when analytics or ads are switched on)
   ------------------------------------------------------------ */
.consent {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30;
  display: grid; gap: 12px; padding: 16px 18px; border-radius: var(--r-card);
  background: var(--cream); color: var(--cocoa); border: 1px solid var(--line-day);
  box-shadow: 0 12px 40px var(--shadow);
  max-width: 560px; margin-inline: auto; font-size: 15px;
}
.consent p { margin: 0; }
.consent .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.consent .btn { min-height: 44px; padding: 0 20px; font-size: 15px; }

/* ------------------------------------------------------------
   Privacy and not-found pages
   ------------------------------------------------------------ */
.prose { max-width: 62ch; padding-block: 24px var(--section); }
.prose h1 { font-family: var(--font-display); font-size: var(--h2); line-height: 1.06; margin-bottom: 16px; }
.prose h2 { font-family: var(--font-text); font-weight: 600; font-size: 1.05em; margin: 28px 0 6px; }
.prose .intro { font-size: 1.1em; }
.prose .btn { margin-top: 12px; }

/* ------------------------------------------------------------
   Wider screens
   ------------------------------------------------------------ */
@media (min-width: 760px) {
  .items { grid-template-columns: repeat(6, 1fr); gap: 32px 28px; }
  .items li { grid-column: span 2; }
  .items li:nth-child(4), .items li:nth-child(5) { grid-column: span 3; }
  .waitlist .panel { padding: 48px; }
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center; column-gap: 56px; padding-top: 0;
  }
  .hero-media { margin: 0; }
  .moments { grid-template-columns: 1fr 1fr; gap: 56px; }
  .moment { grid-template-columns: 1fr; }
  .moment-copy { order: 0; }
  .moment:nth-child(2) { transition-delay: .18s; }
  .silk .inner { grid-template-columns: 1fr 1fr; align-items: center; column-gap: 64px; }
  .footer { grid-template-columns: auto 1fr auto; align-items: center; }
  .footer nav { justify-content: center; }
}

/* ------------------------------------------------------------
   Reduced motion: colour may change, nothing moves.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .star, .hero-media, .minisun { animation: none; }
  .sun { transform: none; }
  .wake, .reveal { transform: none; transition: opacity .4s ease; }
  .reveal { opacity: 1; }
  .sticky-cta { transform: translate(-50%, 0); transition: opacity .4s ease; }
  .btn:active, .pill:active { transform: none; }
}