/* G.M. Orina & Co. — Custom CSS */

:root {
  --navy:   #0E2A5C;
  --red:    #C8102E;
  --white:  #FFFFFF;
  --ivory:  #F8F6F1;
  --text:   #4A4A4A;
  --muted:  #888888;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body { font-family: 'DM Sans', sans-serif; background: #fff; color: var(--text); overflow-x: hidden; line-height: 1.6 }

/* ── Scroll reveal ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease }
.reveal.visible { opacity: 1; transform: none }

/* ── Section label with red rule ── */
.section-label::before {
  content: ''; display: block;
  width: 32px; height: 2px;
  background: var(--red); margin-bottom: 12px;
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px; background: var(--navy); color: #fff;
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .875rem;
  letter-spacing: .06em; text-decoration: none; transition: background .25s ease;
}
.btn-primary:hover { background: var(--red) }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px; background: transparent; color: var(--navy);
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .875rem;
  letter-spacing: .06em; border: 1.5px solid var(--navy); text-decoration: none;
  transition: all .25s ease;
}
.btn-outline:hover { background: var(--navy); color: #fff }

/* ── Typography ── */
.heading-display {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700; line-height: 1.08; color: var(--navy);
}
.heading-section {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700; line-height: 1.2; color: var(--navy);
}

/* ── Parallax ── */
.parallax-bg {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
@media (max-width: 768px) {
  .parallax-bg { background-attachment: scroll }
}

/* ── Nav underline hover ── */
.nav-link { position: relative }
.nav-link::after {
  content: ''; position: absolute;
  bottom: 0; left: 1rem; right: 1rem; height: 2px;
  background: var(--red); transform: scaleX(0);
  transition: transform .28s ease; transform-origin: left;
}
.nav-link:hover::after { transform: scaleX(1) }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px }
::-webkit-scrollbar-track { background: #f1f1f1 }
::-webkit-scrollbar-thumb { background: var(--navy) }
::-webkit-scrollbar-thumb:hover { background: var(--red) }

/* ── Article rich text ── */
.article-body h1, .article-body h2, .article-body h3 {
  font-family: 'Cormorant Garamond', serif; color: var(--navy); margin: 28px 0 14px
}
.article-body p { color: var(--text); font-size: 1rem; line-height: 1.9; margin-bottom: 18px }
.article-body a { color: var(--red); text-decoration: underline }
.article-body blockquote {
  border-left: 3px solid var(--red); padding-left: 20px;
  margin: 24px 0; font-style: italic; color: var(--muted)
}
.article-body strong { color: var(--navy); font-weight: 600 }
.article-body ul, .article-body ol { color: var(--text); padding-left: 24px; margin-bottom: 18px; line-height: 1.9 }
.article-body ul li::marker, .article-body ol li::marker { color: var(--red) }