/* ═══════════════════════════════════════════════════════════════
   Miranda Di Grande — shared design system
   Used across Landing, Biography, Foundation, Contact
   ═══════════════════════════════════════════════════════════════ */

:root{
  --paper:#fbf8f3;
  --paper-warm:#f4eee3;
  --pink:#ff3d8a;
  --pink-soft:#ffe4ee;
  --pink-deep:#c2266a;
  --ink:#1a1614;
  --ink-soft:#5a534b;
  --ink-faint:#9a9087;
  --rule:rgba(26,22,20,.18);
  --rule-strong:rgba(26,22,20,.5);
  --serif:'Cormorant Garamond', 'Times New Roman', serif;
  --sans:'Manrope', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
}
*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--pink); color:#fff; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }

.serif{ font-family:var(--serif); }
.mono{ font-family:var(--mono); }
.ital{ font-style:italic; }
.meta{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.pink{ color:var(--pink-deep); }
.pink-bg{ background:var(--pink); color:#fff; }

/* ─────────── PLACEHOLDER IMAGES ─────────── */
.ph{
  position:relative; overflow:hidden; background:var(--paper-warm);
  background-image:
    linear-gradient(135deg, rgba(255,61,138,.05) 0%, transparent 40%),
    linear-gradient(45deg, rgba(26,22,20,.08) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(26,22,20,.04) 0 1px, transparent 1px 9px);
}
.ph::after{
  content: attr(data-label);
  position:absolute; left:12px; bottom:10px; right:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(26,22,20,.5);
  pointer-events:none;
}
.ph[data-tone="dark"]{ background-color:#262120; color:#e8dfd2; }
.ph[data-tone="dark"]::after{ color:rgba(232,223,210,.55); }
.ph[data-tone="pink"]{ background-color:#fde0ec;
  background-image:
    linear-gradient(135deg, rgba(255,61,138,.20) 0%, transparent 50%),
    repeating-linear-gradient(135deg, rgba(194,38,106,.06) 0 1px, transparent 1px 9px);
}

/* ─────────── TOP NAV ─────────── */
.topnav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:32px 52px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background:rgba(238,231,218,.78);
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease, padding .35s ease, opacity .35s ease, transform .35s ease;
}
.topnav.hidden{ opacity:0; transform:translateY(-100%); pointer-events:none; }
.topnav.scrolled{
  background:rgba(238,231,218,.95);
  border-bottom-color:var(--rule);
  padding:24px 52px;
}
.topnav.dark{
  background:rgba(20,17,16,.55);
  color:#f4eee3;
}
.topnav.dark .nav-links a{ color:#f4eee3; }
.brand{
  display:flex; align-items:center; gap:10px;
}
.brand-bird{ width:120px; height:auto; display:block; margin:-10px 0; }
.brand-name{
  font-family:var(--serif); font-style:italic; font-size:24px; font-weight:500;
  letter-spacing:.01em; line-height:1;
}
.nav-links{ display:flex; gap:42px; align-items:center; }
.nav-links a{
  font-family:var(--sans); font-size:15px; font-weight:400; letter-spacing:.04em;
  color:var(--ink); position:relative; padding:6px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--pink);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after{ transform:scaleX(1); }
.nav-links a.foundation{ color:var(--pink-deep); font-weight:500; }
.nav-links a.foundation::after{ background:#fff; }
.topnav.dark .nav-links a.foundation{ color:var(--pink); }
.nav-cta{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid currentColor; padding:10px 18px; border-radius:999px;
}

/* ─────────── BURGER + MOBILE MENU ─────────── */
.nav-burger{
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column;
  width: 44px; height: 44px;
  background: transparent; border: 0; cursor: pointer;
  padding: 0; color: inherit;
  z-index: 110;
}
.nav-burger span{
  display: block;
  width: 26px; height: 2px;
  background: currentColor;
  margin: 4px 0;
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.nav-burger.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2){ opacity: 0; }
.nav-burger.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset: 0; z-index: 95;
  background: #1a1614;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 28px;
  padding: 90px 24px 120px;
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
  overflow-y: auto;
}
.mobile-menu.is-open{ transform: translateX(0); pointer-events: auto; }
.mobile-menu a{
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 32px; line-height: 1;
  color: #f4eee3;
  position: relative;
}
.mobile-menu a.foundation{ color: var(--pink); }

/* Footer of the mobile menu: imprint, privacy, instagram */
.mobile-menu-footer{
  position: absolute; left: 0; right: 0; bottom: 36px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.mobile-menu-footer .footer-links{
  display: flex; gap: 28px;
}
.mobile-menu-footer .footer-links a{
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; font-style: normal;
  color: rgba(244,238,227,.55);
  transition: color .2s;
}
.mobile-menu-footer .footer-links a:hover{ color: #f4eee3; }
.mobile-menu-footer .footer-links a::after{ display: none; }
.mobile-menu-socials{
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
/* Use .mobile-menu a.mobile-menu-insta so we out-specify the generic
   .mobile-menu a rule (which sets font-size: 32px and italic serif). */
.mobile-menu a.mobile-menu-insta{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border: 1px solid rgba(244,238,227,.22);
  border-radius: 999px;
  color: rgba(244,238,227,.75);
  font-family: var(--mono); font-size: 11px; line-height: 1;
  letter-spacing: .09em;
  text-transform: lowercase; font-style: normal; font-weight: 400;
  transition: color .2s, border-color .2s, background .2s;
}
.mobile-menu a.mobile-menu-insta:hover{
  color: #fff; border-color: var(--pink); background: rgba(255,61,138,.12);
}
.mobile-menu a.mobile-menu-insta::after{ display: none !important; }
.mobile-menu a.mobile-menu-insta svg{
  width: 14px; height: 14px; flex-shrink: 0;
}

/* ─────────── PAGE TRANSITION OVERLAY ─────────── */
/* Glittered black background w/ logo + thin loading bar.
   On every navigation click, this overlay takes over the screen
   while the loading bar fills, then we navigate. On the next page
   the overlay starts full and fades out as the bar empties.
   ─────────────────────────────────────────────────────────────── */
.page-transition{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:#fbf8f3;
  opacity:0; pointer-events:none;
  transition: opacity .35s ease;
}
.page-transition.active{ opacity:1; pointer-events:auto; }

.pt-scene{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.pt-path-svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
.page-transition.active #pt-path{
  animation: pt-draw 1.6s cubic-bezier(.55,.1,.35,1) forwards;
}
@keyframes pt-draw{
  0%   { stroke-dashoffset: 3000; }
  100% { stroke-dashoffset: 0; }
}

/* ─── Colibri flying along the path ─── */
.pt-bird-wrap{
  position:absolute; left:0; top:0;
  width:100%; height:100%;
  pointer-events:none;
}
.pt-bird-mover{
  position:absolute; left:0; top:0;
  display:inline-block;
  opacity:0;
  will-change: transform, opacity;
  transform: translate(-15vw, 64vh);
}
.pt-bird-flap{
  display:inline-block;
  transform-origin: 50% 55%;
}
.pt-bird-img{
  display:block;
  width:14vw; max-width:200px; min-width:110px;
  height:auto;
  /* The source image is a hummingbird facing RIGHT — keep it that way;
     the .pt-bird-mover handles position + slight tilt only. */
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.12));
}
.page-transition.active .pt-bird-mover{
  animation: pt-fly 1.6s cubic-bezier(.4,.05,.55,1) forwards;
}
.page-transition.active .pt-bird-flap{
  animation: pt-flap-squash .065s ease-in-out infinite;
}
/* The fly path: matches the SVG path shape — gentle dip, small heart-loop in mid,
   then off to the right. We tilt the body slightly toward direction of motion but
   never flip it; the bird always faces right. */
@keyframes pt-fly{
  0%   { transform: translate(-15vw, 64vh) rotate(-2deg); opacity:0; }
  8%   { opacity:1; }
  18%  { transform: translate(12vw, 70vh)  rotate(-3deg); }
  35%  { transform: translate(36vw, 56vh)  rotate(-12deg); }
  46%  { transform: translate(48vw, 38vh)  rotate(-22deg); }
  54%  { transform: translate(46vw, 28vh)  rotate(-8deg); }
  62%  { transform: translate(54vw, 32vh)  rotate(8deg); }
  70%  { transform: translate(58vw, 46vh)  rotate(14deg); }
  78%  { transform: translate(66vw, 52vh)  rotate(2deg); }
  90%  { transform: translate(90vw, 48vh)  rotate(-1deg); opacity:1; }
  100% { transform: translate(118vw, 44vh) rotate(-2deg); opacity:0; }
}
@keyframes pt-flap-squash{
  0%, 100% { transform: scaleY(1)    scaleX(1); }
  50%      { transform: scaleY(.82)  scaleX(1.03); }
}

.pt-meta{
  position:absolute; bottom:32px; left:0; right:0; text-align:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.32em; text-transform:uppercase;
  color:rgba(232,223,210,.5);
}
.pt-meta b{ color:#f4eee3; font-weight:500; margin-left:8px; }

/* ─────────── HUMMINGBIRD SCROLL RAIL ─────────── */
.rail{
  position:fixed; top:120px; bottom:80px; right:24px; width:18px;
  z-index:50; pointer-events:none;
}
.rail-line{
  position:absolute; top:0; bottom:0; left:50%; width:1px;
  background:linear-gradient(to bottom, transparent, var(--rule-strong) 8%, var(--rule-strong) 92%, transparent);
  transform:translateX(-50%);
}
.rail-tick{
  position:absolute; left:50%; transform:translateX(-50%);
  width:9px; height:1.4px; background:var(--rule-strong);
  pointer-events:auto; cursor:pointer;
}
.rail-tick::after{
  content: attr(data-label);
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); white-space:nowrap;
  opacity:.55; transition:opacity .25s, color .25s, letter-spacing .25s;
}
.rail-tick:hover::after{ opacity:1; }
.rail-tick.active::after{ opacity:1; color:var(--ink); letter-spacing:.18em; }
.rail-tick.active{ background:var(--pink); width:14px; }
.bird-wrap{
  position:absolute; left:50%; top:0; transform:translate(-50%, -50%);
  width:max-content;
  transition:top .9s cubic-bezier(.22,.61,.36,1);
  will-change:top;
}
.bird-wrap img{ max-width:none; }
.bird-wrap.flap .bird-wing-top{ animation:flapTop .22s ease-in-out infinite alternate; transform-origin:48px 28px; }
.bird-wrap.flap .bird-wing-bot{ animation:flapBot .22s ease-in-out infinite alternate; transform-origin:48px 36px; }
@keyframes flapTop{
  0%{ transform: rotate(-4deg) skewX(0deg) scaleY(1); }
  100%{ transform: rotate(-26deg) skewX(-4deg) scaleY(.78); }
}
@keyframes flapBot{
  0%{ transform: rotate(2deg) scaleY(1); }
  100%{ transform: rotate(20deg) scaleY(.7); }
}
.rail.dark .rail-line{
  background:linear-gradient(to bottom, transparent, rgba(244,238,227,.45) 8%, rgba(244,238,227,.45) 92%, transparent);
}
.rail.dark .rail-tick{ background:rgba(244,238,227,.45); }
.rail.dark .rail-tick::after{ color:rgba(244,238,227,.7); opacity:.7; }
.rail.dark .rail-tick.active::after{ color:var(--paper); opacity:1; }
.rail.dark .rail-tick.active{ background:var(--pink); }

@media (max-width: 720px){
  .rail{ display: none !important; }
}

/* ─────────── HEADLINE TRAILING DOT (pink, upright) ─────────── */
h1 .dot, h2 .dot, h3 .dot, h4 .dot, h5 .dot, h6 .dot{
  color:var(--pink);
  font-style:normal;
}

/* ─────────── SHARED SECTION FRAME ─────────── */
section.editorial{
  padding:120px 36px;
  position:relative;
}
.container{ max-width:1200px; margin:0 auto; }
.container-narrow{ max-width:780px; margin:0 auto; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:30px;
  border-bottom:1px solid var(--rule); padding-bottom:18px; margin-bottom:48px;
  flex-wrap:wrap;
}
.section-head h2{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(44px, 6vw, 72px); line-height:.95;
  margin:0; letter-spacing:.005em;
}
.section-head .meta{ padding-bottom:14px; }
.section-kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:10px;
}
.section-kicker::before{
  content:""; width:30px; height:1px; background:var(--pink);
}

/* ─────────── FOOTER — compact, professional ─────────── */
footer{
  position:relative;
  padding: 52px 48px 24px;
  background:#1a1614;
  color:#f4eee3;
  overflow:hidden;
  border-top:1px solid rgba(244,238,227,.06);
  font-family:var(--sans);
}
/* very subtle pink wash, top-right */
footer::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(255,61,138,.07), transparent 55%);
}
.footer-inner{
  position:relative; max-width:1200px; margin:0 auto;
}
/* COLUMNS — brand · explore · foundation · info */
.footer-cols{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:36px;
}
.footer-col{
  display:flex; flex-direction:column;
  gap:14px;
  font-family:var(--sans);
}
.footer-col-brand{ gap:18px; }
.footer-brand{ display:inline-flex; align-items:center; }
.footer-brand-img{ width:96px; height:auto; display:block; }

.footer-socials{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  margin:0;
}
.footer-socials a{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 14px 5px 7px;
  border:1px solid rgba(244,238,227,.18);
  border-radius:999px;
  color:rgba(244,238,227,.78);
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:lowercase; font-style:normal;
  transition:color .25s, border-color .25s, background .25s;
}
.footer-socials a:hover{
  color:#fff; border-color:var(--pink); background:rgba(255,61,138,.12);
}
.footer-socials a span{ font-style:normal; }
.footer-socials svg{ width:14px; height:14px; flex-shrink:0; }

.footer-email{
  font-size:13px; color:rgba(244,238,227,.85);
  border-bottom:1px solid rgba(244,238,227,.20);
  padding-bottom:2px; align-self:flex-start;
  transition:color .25s, border-color .25s;
}
.footer-email:hover{ color:var(--pink); border-color:var(--pink); }
.footer-addr{
  font-size:12px; line-height:1.55;
  color:rgba(244,238,227,.5);
}

.footer-col-title{
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(244,238,227,.55);
  margin:4px 0 4px; font-weight:500;
}
.footer-col-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.footer-col-list li{ list-style:none; }
.footer-col-list a{
  font-size:13.5px; color:rgba(244,238,227,.82);
  transition:color .25s;
}
.footer-col-list a:hover{ color:var(--pink); }
.footer-col-list a.foundation{ color:var(--pink); font-weight:500; }

/* Donate button (footer) */
.footer-donate{
  display:inline-flex; align-items:center; justify-content:center;
  align-self:flex-start;
  margin-top:6px;
  padding:9px 18px;
  background:var(--pink);
  color:#fff;
  border-radius:999px;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:500;
  transition:background .25s, transform .2s, box-shadow .25s;
}
.footer-donate:hover{
  background:var(--pink-deep);
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(255,61,138,.22);
}

/* BOTTOM STRIP — copyright centered, divided by thin line */
.footer-bottom{
  display:flex; align-items:center; justify-content:center;
  margin-top:8px; padding-top:18px;
  border-top:1px solid rgba(244,238,227,.10);
}
.footer-fine{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,238,227,.5);
  text-align:center;
}

@media (max-width: 900px){
  footer{ padding: 40px 26px 22px; }
  .footer-cols{
    grid-template-columns: 1fr 1fr;
    gap:34px;
    padding-bottom:28px;
  }
}
@media (max-width: 480px){
  .footer-cols{ grid-template-columns: 1fr; gap:28px; }
}

/* ─────────── ANIMATIONS ─────────── */
@keyframes shimmer{
  0%, 100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

/* ─────────── MOBILE ─────────── */
@media (max-width: 720px){
  .topnav{ padding:18px 22px; }
  .topnav.scrolled{ padding:14px 22px; }
  .brand-bird{ width:80px; }
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-burger{ display: flex; color: #f4eee3; }
  section.editorial{ padding:80px 18px; }

  /* Footer collapses to a single column with lighter padding */
  footer{ padding: 40px 22px 22px; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
  .footer-cols{ grid-template-columns: 1fr; gap: 28px; }
  .footer-col{ gap: 10px; }
  .footer-bottom{ margin-top: 16px; padding-top: 14px; }
}