/* ═══════════════════════════════════════════
   VARIABLES
═══════════════════════════════════════════ */
:root {
  --dark-coffee:   #2E1803;
  --rich-mahogany: #35010D;
  --smoky-rose:    #8A6157;
  --alabaster:     #D8DFDA;
  --pale-sky:      #CBEFFE;
}

/* ═══════════════════════════════════════════
   BASE
═══════════════════════════════════════════ */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--alabaster);
  color: var(--dark-coffee);
}

/* Loading state */
body.loading { visibility: hidden; }
body.ready   { visibility: visible; }

/* ═══════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════ */
#navbar {
  transition: background 0.35s, box-shadow 0.35s;
}
#navbar.scrolled {
  background: rgba(46, 24, 3, 0.97);
  box-shadow: 0 1px 20px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
}

/* ═══════════════════════════════════════════
   HERO PHOTO
═══════════════════════════════════════════ */
.photo-ring {
  outline: 3px solid var(--smoky-rose);
  outline-offset: 5px;
}
.photo-placeholder {
  background: var(--smoky-rose);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

/* ═══════════════════════════════════════════
   ORNAMENT DIVIDER
═══════════════════════════════════════════ */
.ornament {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ornament::before,
.ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.25;
}

/* ═══════════════════════════════════════════
   CARDS
═══════════════════════════════════════════ */
.card-light {
  background: #fff;
  border: 1px solid rgba(138, 97, 87, 0.18);
  transition: box-shadow 0.3s, transform 0.3s;
}
.card-light:hover {
  box-shadow: 0 8px 32px rgba(46, 24, 3, 0.1);
  transform: translateY(-3px);
}

/* ═══════════════════════════════════════════
   QUOTE
═══════════════════════════════════════════ */
.quote-block {
  border-left: 3px solid var(--smoky-rose);
}

/* ═══════════════════════════════════════════
   ABOUT BIO — markdown rendered styles
═══════════════════════════════════════════ */
#about-bio p {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(46, 24, 3, 0.75);
  margin-bottom: 1.1rem;
}
#about-bio p:last-child { margin-bottom: 0; }
#about-bio strong {
  font-weight: 500;
  color: var(--rich-mahogany);
}

/* ═══════════════════════════════════════════
   SUBSTACK — homepage cards
═══════════════════════════════════════════ */
.substack-thumb {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}
/* Clamp the excerpt to keep card heights even */
.substack-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* "Ver mais" toggle icon flips when the extra cards are shown */
#substack-more.open .substack-more-icon {
  transform: rotate(180deg);
}

/* ═══════════════════════════════════════════
   SUBSTACK — reader page (blog.html)
═══════════════════════════════════════════ */
.substack-body {
  color: rgba(46, 24, 3, 0.82);
  font-weight: 300;
  line-height: 1.85;
  font-size: 1.02rem;
}
.substack-body p { margin-bottom: 1.35rem; text-align: left !important; }
.substack-body strong { font-weight: 500; color: var(--rich-mahogany); }
.substack-body em { font-style: italic; }
.substack-body figure { margin: 2rem 0; }
.substack-body figure img {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  display: block;
}
.substack-body a { color: var(--rich-mahogany); text-decoration: underline; text-underline-offset: 2px; }

/* ═══════════════════════════════════════════
   BEHOLD INSTAGRAM WIDGET
═══════════════════════════════════════════ */
#ig-behold-container {
  width: 100%;
}
/* Behold renders a <behold-widget> custom element;
   give it room and let it control its own layout */
behold-widget {
  display: block;
  width: 100%;
}

/* ═══════════════════════════════════════════
   WHATSAPP FAB
═══════════════════════════════════════════ */
#whatsapp-fab {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 999;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
#whatsapp-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 26px rgba(37, 211, 102, 0.55);
}

/* ═══════════════════════════════════════════
   FADE-UP ANIMATION
═══════════════════════════════════════════ */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════
   MOBILE MENU
═══════════════════════════════════════════ */
#mobile-menu {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.32s ease, opacity 0.32s ease;
}
#mobile-menu.open {
  max-height: 360px;
  opacity: 1;
}