@font-face{
  font-family:'Letteria Pro Script';
  src:url("../fonts/Letteria Pro Script Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Letteria Pro Script';
  src:url("../fonts/Letteria Pro Script Bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Letteria Pro Script';
  src:url("../fonts/Letteria Pro Script Black.ttf") format("truetype");
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Letteria Pro Slab';
  src:url("../fonts/Letteria Pro Slab.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Letteria Pro Sans';
  src:url("../fonts/Letteria Pro Sans.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
:root{
  --font-title:'Nunito Sans', sans-serif;
  --font-body:'Montserrat', sans-serif;
  --font-cursive:'Letteria Pro Script', cursive;
  --cream:#e3ddc3;
  --cream-2:#d9d2b3;
  --pink:#f8a29c;
  --pink-deep:#f2867e;
  --red:#c1442d;
  --red-deep:#9c3420;
  --ink:#2c2015;
  --ink-soft:#4a3a2a;
  --line: rgba(193,68,45,0.45);
  --nav-h: 92px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  overflow-x:hidden;
  cursor:none;
}
@media (pointer:coarse){ body{ cursor:auto; } }

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--red); color:var(--cream);}

.eyebrow, .display, nav a, .btn{
  font-family:var(--font-title);
  text-transform:uppercase;
  letter-spacing:.03em;
}
.oval span{
  font-family:var(--font-cursive);
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
}
.script{
  font-family:var(--font-cursive);
  font-weight:700;
}

/* ---------- grain overlay ---------- */
.grain{
  position:fixed; inset:0; z-index:999; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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");
}

/* ---------- custom cursor ---------- */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; z-index:1000; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{ width:6px; height:6px; background:var(--red); }
.cursor-ring{
  width:34px; height:34px; border:1px solid var(--red);
  transition:width .25s ease, height .25s ease, background .25s ease, opacity .25s ease, border-color .25s ease;
}
.cursor-ring.active{ width:64px; height:64px; background:rgba(193,68,45,0.12); }
@media (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------- nav ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--nav-h);
  display:flex; align-items:center;
  padding:0 clamp(20px,4vw,56px);
  background:transparent;
  transition:background .4s ease;
}
header.scrolled{ background:rgba(227,221,195,0.92); backdrop-filter:blur(8px); }

.brand{
  font-family:var(--font-title); text-transform:uppercase;
  font-size:14px; line-height:1.35; color:var(--red);
  letter-spacing:.02em; margin-right:clamp(20px,4vw,60px);
  text-align:center;
}
nav{ display:flex; flex:1; align-items:center; }
nav ul{ display:flex; list-style:none; align-items:center; gap:clamp(20px,3vw,44px); margin-left:auto; }
nav ul li{
  display:flex; align-items:center; justify-content:center;
  padding:9px 16px; white-space:nowrap;
  border-top:1px dotted var(--line); border-bottom:1px dotted var(--line);
}
nav a{
  font-size:12px; color:var(--red); position:relative;
  text-align:center; display:inline-block;
}
nav a::after{
  content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px;
  background:var(--red); transition:width .3s ease;
}
nav a:hover::after, nav a.active::after{ width:100%; }
.nav-cta{
  font-family:var(--font-title); text-transform:uppercase;
  font-size:13px; color:var(--ink); text-align:right; line-height:1.3;
  display:flex; align-items:center; justify-content:center;
  padding:9px 16px; white-space:nowrap; margin-left:clamp(20px,3vw,44px);
  border-top:1px dotted var(--line); border-bottom:1px dotted var(--line);
  font-weight:700; transition:opacity .3s ease;
}
.nav-cta:hover{ opacity:.65; }

.burger{ display:none; width:28px; height:20px; position:relative; cursor:none; align-self:center; margin-left:auto; }
.burger span{ position:absolute; left:0; right:0; height:2px; background:var(--red); transition:.3s; }
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:9px; }
.burger span:nth-child(3){ top:18px; }
.burger.open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

section{ position:relative; padding:120px clamp(20px,5vw,80px); scroll-margin-top:var(--nav-h); }
.wrap{ max-width:1280px; margin:0 auto; }
/* sections joined by a dotted divider get matching, tighter spacing on the joined edges */
#about{ padding-bottom:35px; }
#latest{ padding-top:35px; padding-bottom:35px; }
#story{ padding-top:35px; padding-bottom:35px; }
#contact{ padding-top:35px; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }

/* ---------- hero ---------- */
#top{
  background:var(--pink);
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding-top:var(--nav-h);
  overflow:hidden;
}
.hero-inner{ position:relative; }
.hero-title{
  font-size:clamp(42px,16vw,190px);
  line-height:.86;
  color:var(--cream);
  filter:
    drop-shadow(1px 0 0 var(--red))
    drop-shadow(-1px 0 0 var(--red))
    drop-shadow(0 1px 0 var(--red))
    drop-shadow(0 -1px 0 var(--red));
  letter-spacing:.01em;
  white-space:nowrap;
}

/* ---------- eyebrow + heading ---------- */
.eyebrow, h2.section-title{
  color:var(--red); font-weight:700; font-size:clamp(34px,4.6vw,52px);
  letter-spacing:.02em; margin-bottom:14px; display:inline-block;
  text-transform:uppercase;
}
.rule{ border:none; border-top:1px dotted var(--line); margin:70px 0; }

p, .quote-col p{
  font-family:var(--font-body); font-weight:500; text-transform:uppercase;
  font-size:14px; line-height:1.85; color:var(--ink-soft); letter-spacing:.02em;
}

/* ---------- oval bubble ---------- */
.oval{
  border:1px dashed var(--red); border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  aspect-ratio:1.55/1; padding:18px 10px;
}
.oval span{
  color:var(--red-deep); font-size:clamp(22px,2.8vw,30px); line-height:1.15;
}

.float{ animation:floaty 5.5s ease-in-out infinite; }
.float.slow{ animation-duration:7.5s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }

.dotline{ width:1px; background:var(--line); margin:0 auto; }

/* magnetic buttons / links */
.magnetic{ display:inline-block; will-change:transform; }

/* ---------- ABOUT ---------- */
#about .grid{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
}
.about-photo-wrap{ position:relative; }
.about-photo{ overflow:hidden; transition:opacity .4s ease; }
.about-photo:hover{ opacity:.92; }
.about-photo img{ width:100%; aspect-ratio:1.48/1; object-fit:cover; }
.about-mic{ position:absolute; top:20px; left:-78px; width:330px; z-index:2; }

.pull-quote{
  font-family:var(--font-title); color:var(--red); font-size:clamp(22px,2.6vw,32px);
  line-height:1.3; letter-spacing:.01em;
}
.quote-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:56px; }

/* ---------- LATEST ---------- */
.latest-head{ display:grid; grid-template-columns:.9fr 1.1fr 1.1fr; gap:40px; align-items:start; margin-bottom:24px;}
.latest-head .who{ border-top:1px solid var(--line); padding-top:24px; }
.latest-head .who h3{ font-family:var(--font-title); text-transform:uppercase; font-size:22px; color:var(--ink); }
.latest-head .who p{ margin-top:4px; }

.latest-grid{ display:grid; grid-template-columns:.9fr 1.1fr 1.1fr; gap:40px; align-items:start; }
.latest-photo{ overflow:hidden; }
.latest-photo img{ width:100%; aspect-ratio:3/3.6; object-fit:cover; filter:grayscale(.05); transition:transform .6s ease; }
.latest-photo:hover img{ transform:scale(1.06); }
.latest-caption{ text-align:center; margin-top:26px; font-family:var(--font-title); text-transform:uppercase; color:var(--ink); font-size:clamp(18px,2vw,24px); line-height:1.35; }
.subscribe-col{ text-align:center; }
.subscribe-cta{ font-family:var(--font-title); font-weight:700; text-transform:uppercase; color:var(--red); font-size:22px; letter-spacing:.02em; margin-top:10px; line-height:1.4; display:inline-block; }

/* ---------- STORY (teaser) ---------- */
.story-layout{ display:grid; grid-template-columns:1fr 300px; gap:50px; align-items:stretch; }
.story-left{ display:flex; flex-direction:column; }
.story-photo{
  border-radius:50%; overflow:hidden; aspect-ratio:1.5/1;
  width:52%; max-width:460px; min-width:280px;
  margin:0 auto 60px;
  transition:transform .5s ease;
}
.story-photo:hover{ transform:scale(1.03); }
.story-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.story-side{
  text-align:center; display:flex; flex-direction:column; align-items:center;
  justify-content:center; border-left:1px dotted var(--line); padding-left:40px;
}
.story-side img{ width:220px; }
.story-side .cta-label{ font-family:var(--font-title); font-weight:700; text-transform:uppercase; margin-top:14px; color:var(--red); font-size:24px; line-height:1.4; display:block; }

.quote-cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; }

/* ---------- CONTACT ---------- */
#contact .grid{ display:grid; grid-template-columns:1fr .9fr 1fr; gap:40px; align-items:start; }
.contact-photo{ justify-self:center; }
.contact-block h2{ margin-bottom:34px; }
.contact-block h3{ font-family:var(--font-title); text-transform:uppercase; font-size:14px; color:var(--red); letter-spacing:.1em; margin-bottom:10px; }
.contact-block .val{ font-family:var(--font-body); text-transform:uppercase; letter-spacing:.02em; font-size:14px; color:var(--ink); margin-bottom:34px; }
.contact-block .val a{ border-bottom:1px solid transparent; transition:border-color .3s; }
.contact-block .val a:hover{ border-color:var(--ink); }
.contact-photo{
  border-radius:160px 160px 0 0; overflow:hidden;
}
.contact-photo img{ width:100%; aspect-ratio:.75/1; object-fit:cover; object-position:50% 20%; }
.hitusup{ text-align:center; }
.hitusup .oval{ width:220px; aspect-ratio:1.35/1; margin:-10px auto 0; position:relative; z-index:2; }

/* ---------- pink banner ---------- */
.banner{
  background:var(--pink); text-align:center; padding:90px 20px; overflow:hidden;
}
.banner .script{
  font-size:clamp(48px,11vw,140px); color:var(--cream); line-height:1;
  filter:
    drop-shadow(1px 0 0 var(--red))
    drop-shadow(-1px 0 0 var(--red))
    drop-shadow(0 1px 0 var(--red))
    drop-shadow(0 -1px 0 var(--red));
}

/* ---------- WHO WE ARE ---------- */
#whoweare{ padding-top:110px; }
#whoweare h2.section-title{ display:block; text-align:center; margin:0 auto 60px; }
.essay{ max-width:980px; margin:0 auto; display:grid; gap:22px; text-align:center; }
.essay p{ font-size:14px; }

.memory-block{ display:grid; grid-template-columns:.4fr .8fr .4fr; gap:30px; align-items:center; margin:70px 0; }
.memory-block.reverse{ grid-template-columns:.4fr .8fr .4fr; }
.memory-quote{ font-family:var(--font-title); text-transform:uppercase; color:var(--red); font-size:clamp(20px,2.4vw,28px); line-height:1.3; }
.memory-photo{ overflow:hidden; }
.memory-photo img{ width:100%; aspect-ratio:4/3.2; object-fit:cover; }
.memory-photo.tall img{ aspect-ratio:.75/1; }
.memory-year{ font-family:var(--font-title); font-size:clamp(48px,6vw,90px); color:var(--ink); text-align:center; }
.baby-label{ margin-top:14px; }
.baby-label .oval{ width:180px; aspect-ratio:1.5/1; margin:0 auto; }

.voice{ max-width:900px; margin:50px auto; display:grid; gap:20px; text-align:center; }
.voice p{ font-size:14px; }

.pikler{ text-align:center; margin-top:90px; }
.pikler h3{ font-family:var(--font-title); text-transform:uppercase; font-size:26px; margin-bottom:30px; }
.pikler p{ max-width:780px; margin:0 auto 14px; font-size:14px; }
.pikler .link{ font-family:var(--font-title); text-transform:uppercase; display:inline-block; margin-top:20px; font-size:13px; letter-spacing:.05em; border-bottom:1px solid var(--ink); }
.pikler-art{ margin-top:40px; }
.pikler-art .oval{ aspect-ratio:1.3/1; }
.computer-crop{ width:130px; height:80px; overflow:hidden; margin:0 auto; }
.computer-crop img{ width:130px; }

/* ---------- footer ---------- */
footer{ background:var(--cream); text-align:center; padding:20px; border-top:1px dotted var(--line); }
footer .fine{ margin:10px 0; font-size:11px; color:var(--ink-soft); opacity:.7; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  nav ul{ display:none; }
  .nav-cta{ display:none; }
  .burger{ display:block; }
  .wrap{ text-align:center; }
  .eyebrow, h2.section-title{ display:block; margin-left:auto; margin-right:auto; }
  #about .grid{ grid-template-columns:1fr; }
  .about-photo-wrap{ margin-top:0; }
  .about-mic{ position:static; width:260px; margin:0 auto 20px; }
  .quote-cols{ grid-template-columns:1fr; gap:26px; }
  .latest-head{ grid-template-columns:1fr; gap:14px; text-align:center; }
  .latest-grid{ grid-template-columns:1fr; gap:50px; }
  .story-layout{ grid-template-columns:1fr; gap:40px; }
  .story-photo{ margin:0 auto 40px; width:80%; max-width:320px; align-self:center; }
  .story-side{ border-left:none; border-top:1px dotted var(--line); padding-left:0; padding-top:30px; align-items:center; }
  .quote-cols4{ grid-template-columns:1fr 1fr; }
  #contact .grid{ grid-template-columns:1fr; text-align:center; }
  .contact-photo{ max-width:320px; margin:0 auto; }
  .memory-block{ grid-template-columns:1fr; text-align:center; }
  .memory-photo{ max-width:340px; margin:0 auto; }
}
@media (max-width:560px){
  .quote-cols4{ grid-template-columns:1fr; }
  section{ padding:90px 20px; }
}