/* ForeverUniverse — design system v2 (DESIGN.md)
   Brand: colours + logo only. Everything else: Dala reference. */

:root{
  --pf-obsidian:#0D1210;
  --pf-slate:#1C2622;
  --pf-mist:#E9ECE8;
  --pf-fog:#97A29B;
  --pf-champagne:#CBBB98;
  --pf-champ-deep:#A6987A;
  --pf-sage:#7E9C8D;
  --pf-ember:#B0766A;

  --font-ui:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-logo:'Syne',sans-serif;

  --s6:6px; --s12:12px; --s18:18px; --s24:24px; --s30:30px;
  --s36:36px; --s60:60px; --s96:96px; --s120:120px;
  /* (30px token used by carousel dots gap, per reference) */

  --max:1280px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
  .hero-rise>*{opacity:1!important;transform:none!important}
}

body{
  background:var(--pf-obsidian);
  color:var(--pf-mist);
  font-family:var(--font-ui);
  font-weight:200;
  font-size:18px;
  line-height:1.5;
  font-feature-settings:"ss01" on;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--pf-champagne);color:var(--pf-obsidian)}
:focus-visible{outline:2px solid var(--pf-champagne);outline-offset:3px;border-radius:2px}

#field{position:fixed;inset:0;z-index:0;pointer-events:none}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s24);position:relative;z-index:1}
main{position:relative;z-index:1}
section{padding:var(--s96) 0}
@media (max-width:700px){section{padding:var(--s60) 0}}

/* ---------- Type ---------- */
h1,h2,h3{font-weight:400}
.display{font-size:clamp(46px,8.4vw,113px);line-height:1.08;letter-spacing:-.04em}
.heading-lg{font-size:clamp(38px,5.6vw,78px);line-height:1.1;letter-spacing:-.04em}
.heading{font-size:clamp(30px,3.7vw,48px);line-height:1.14;letter-spacing:-.03em}
.heading-sm{font-size:clamp(26px,3.2vw,42px);line-height:1.2;letter-spacing:-.03em}
.heading-xs{font-size:27px;line-height:1.2;letter-spacing:-.01em}
.body-copy{font-weight:200;font-size:18px;line-height:1.55;max-width:520px}
.muted{color:var(--pf-fog)}
.label{
  font-weight:600;font-size:14px;letter-spacing:.35px;text-transform:uppercase;
  color:var(--pf-sage);display:block;margin-bottom:var(--s18);
}
.caption{font-size:12px;color:var(--pf-fog);line-height:1.5}
.caption-up{font-size:12px;font-weight:600;letter-spacing:.35px;text-transform:uppercase;color:var(--pf-fog)}

a{color:var(--pf-mist)}

/* ---------- Nav ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s24);padding:var(--s24) 0;flex-wrap:wrap;
}
.lockup{display:flex;align-items:center;gap:var(--s12);text-decoration:none}
.lockup svg{width:42px;height:19px;flex:none}
.lockup svg path{fill:none;stroke:var(--pf-champagne);stroke-width:1.5px;stroke-linecap:round}
.wordmark{font-family:var(--font-logo);font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--pf-mist);white-space:nowrap}
.wordmark span{color:var(--pf-champagne);font-weight:500}
.nav-links{display:flex;gap:var(--s24);flex-wrap:wrap}
.nav-links a{
  font-weight:600;font-size:14px;letter-spacing:.35px;text-transform:uppercase;
  color:var(--pf-fog);text-decoration:none;transition:color .18s ease;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--pf-mist)}
@media (max-width:900px){
  .nav{justify-content:center;text-align:center}
}

/* ---------- Buttons & links ---------- */
.btn{
  display:inline-block;font-family:var(--font-ui);font-weight:600;font-size:14px;
  letter-spacing:.35px;text-transform:uppercase;
  background:var(--pf-champagne);color:var(--pf-obsidian);
  border:none;border-radius:24px;padding:14px 24px;cursor:pointer;
  transition:background .18s ease;text-decoration:none;white-space:nowrap;
}
.btn:hover{background:var(--pf-champ-deep)}
.ghost{
  font-weight:400;font-size:15px;color:var(--pf-fog);text-decoration:none;
  transition:color .18s ease;
}
.ghost:hover{color:var(--pf-champagne)}
.ghost .arr{display:inline-block;transition:transform .18s ease}
.ghost:hover .arr{transform:translateX(4px)}

/* ---------- Hero ---------- */
.hero{
  display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s60);
  align-items:center;padding:var(--s60) 0 var(--s120);min-height:78vh;
}
.hero.hero-solo{grid-template-columns:1fr;min-height:auto;padding:var(--s96) 0 var(--s60)}
.hero .display{max-width:12ch}
.hero.hero-solo .display{max-width:16ch}
.hero p.body-copy{margin:var(--s36) 0 0}
.hero-actions{display:flex;gap:var(--s24);align-items:center;flex-wrap:wrap;margin-top:var(--s36)}
#loopCanvas{width:100%;height:auto;display:block}
@media (max-width:880px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-bottom:var(--s60)}
  #loopCanvas{max-width:520px;margin:0 auto}
}

/* Hero load rise */
.hero-rise>*{opacity:0;transform:translateY(22px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero-rise>*:nth-child(1){animation-delay:.05s}
.hero-rise>*:nth-child(2){animation-delay:.15s}
.hero-rise>*:nth-child(3){animation-delay:.28s}
.hero-rise>*:nth-child(4){animation-delay:.4s}
.hero-rise>*:nth-child(5){animation-delay:.5s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- Sections ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s60);align-items:start}
.split .heading-lg{max-width:14ch}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:var(--s36)}}

/* Big floating entry rows (teasers, blog, templates) — no cards */
.entries{margin-top:var(--s60);display:flex;flex-direction:column;gap:var(--s60)}
.entry{max-width:820px}
.entry h3 a{text-decoration:none;color:var(--pf-mist);transition:color .18s ease}
.entry h3 a:hover{color:var(--pf-champagne)}
.entry .caption-up{display:block;margin-bottom:var(--s12)}
.entry p{color:var(--pf-fog);max-width:520px;margin-top:var(--s12)}
.entry .ghost{display:inline-block;margin-top:var(--s18)}

/* Dashboard area list */
.areas{margin-top:var(--s36);display:flex;flex-direction:column;gap:var(--s18);max-width:640px}
.area{display:flex;gap:var(--s24);align-items:baseline}
.area b{font-weight:600;font-size:14px;letter-spacing:.35px;text-transform:uppercase;color:var(--pf-champagne);min-width:150px}
.area span{color:var(--pf-fog);font-weight:200}
@media (max-width:560px){.area{flex-direction:column;gap:4px}}

/* Principles */
.principles{margin-top:var(--s60);display:flex;flex-direction:column;gap:var(--s36);max-width:640px}
.principle strong{display:block;font-weight:400;font-size:27px;letter-spacing:-.01em;margin-bottom:var(--s6)}
.principle p{color:var(--pf-fog)}

/* ---------- Email capture ---------- */
.capture{display:flex;gap:var(--s18);align-items:flex-end;flex-wrap:wrap;margin-top:var(--s36)}
.capture .fld{display:flex;flex-direction:column;gap:8px}
.capture label{font-weight:600;font-size:12px;letter-spacing:.35px;text-transform:uppercase;color:var(--pf-sage)}
.capture input{
  background:var(--pf-slate);border:1px solid transparent;border-radius:6px;
  padding:14px 16px;color:var(--pf-mist);font-family:var(--font-ui);
  font-weight:200;font-size:15px;min-width:min(300px,72vw);
  transition:border-color .18s ease;
}
.capture input::placeholder{color:var(--pf-fog)}
.capture input:focus{outline:none;border-color:var(--pf-champagne)}
.micro{font-size:12px;color:var(--pf-fog);margin-top:var(--s12)}
.form-note{font-size:14px;color:var(--pf-sage);margin-top:var(--s18);display:none}
.form-note.show{display:block}

/* ---------- Contact form ---------- */
.contact-form{margin-top:var(--s36);display:flex;flex-direction:column;gap:var(--s18);max-width:520px}
.contact-form .fld{display:flex;flex-direction:column;gap:8px}
.contact-form label{font-weight:600;font-size:12px;letter-spacing:.35px;text-transform:uppercase;color:var(--pf-sage)}
.contact-form input,.contact-form textarea{
  background:var(--pf-slate);border:1px solid transparent;border-radius:6px;
  padding:14px 16px;color:var(--pf-mist);font-family:var(--font-ui);
  font-weight:200;font-size:15px;transition:border-color .18s ease;resize:vertical;
}
.contact-form textarea{min-height:140px}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--pf-fog)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--pf-champagne)}
.contact-form .btn{align-self:flex-start}

/* ---------- Cursor glow (owner override of no-glow rule; keep subtle) ---------- */
#cursorGlow{
  position:fixed;left:-210px;top:-210px;width:420px;height:420px;
  border-radius:50%;pointer-events:none;z-index:4;
  mix-blend-mode:screen;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle,
    rgba(203,187,152,.10) 0%,
    rgba(126,156,141,.05) 38%,
    rgba(176,118,106,.02) 58%,
    transparent 72%);
}

/* ---------- Imagery — rounded rect, no frame, no overlay ---------- */
.img-block{width:100%;height:auto;display:block;border-radius:24px}

/* ---------- Carousel (Dala dots) ---------- */
.carousel{margin-top:var(--s36);max-width:640px}
.carousel .slide{display:none}
.carousel .slide.active{display:block;animation:slidein .5s ease}
@keyframes slidein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.carousel .slide h4{font-weight:400;font-size:clamp(30px,3.7vw,48px);letter-spacing:-.03em;line-height:1.14;color:var(--pf-mist)}
.carousel .slide p{color:var(--pf-fog);margin-top:var(--s12);max-width:520px}
.dots{display:flex;gap:var(--s12);margin-top:var(--s30);align-items:center}
.dot{
  width:8px;height:8px;border-radius:9999px;border:none;padding:0;cursor:pointer;
  background:var(--pf-fog);opacity:.35;
  transition:opacity .18s ease,background .18s ease;
}
.dot:hover{opacity:.7}
.dot[aria-selected="true"]{background:var(--pf-champagne);opacity:1}
.no-js .carousel .slide{display:block;margin-bottom:var(--s36)}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- Footer ---------- */
footer{padding:var(--s96) 0 var(--s60);position:relative;z-index:1}
.foot-line{color:var(--pf-fog);font-size:15px;font-weight:200}
.foot-links{display:flex;gap:var(--s24);flex-wrap:wrap;margin-top:var(--s24)}
.foot-links a{
  font-weight:600;font-size:12px;letter-spacing:.35px;text-transform:uppercase;
  color:var(--pf-fog);text-decoration:none;transition:color .18s ease;
}
.foot-links a:hover{color:var(--pf-mist)}
.foot-mark{margin-top:var(--s36)}
.foot-mark svg{width:64px;height:28px}
.foot-mark svg path{fill:none;stroke:var(--pf-fog);stroke-width:1.5px;opacity:.6}