:root {
  --ink: #18332d;
  --deep: #10352e;
  --green: #1d554a;
  --sage: #9db8aa;
  --cream: #f3eee3;
  --paper: #fffdf8;
  --gold: #c5a15a;
  --muted: #66766f;
  --line: rgba(24, 51, 45, .14);
  --shadow: 0 24px 60px rgba(17, 50, 43, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", Arial, sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.section-shell { width: min(1180px, calc(100% - 44px)); margin-inline: auto; }
.site-header {
  position: sticky; top: 0; z-index: 15; height: 76px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(22px, calc((100vw - 1180px)/2)); background: rgba(255,253,248,.84); backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(24,51,45,.08);
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -.02em; }
.brand-mark { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--deep); color: #fff; font-family: "Playfair Display"; }
.nav { display: flex; gap: 30px; font-size: .94rem; font-weight: 600; }
.nav a { position: relative; }
.nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px; background:var(--gold); transition:.25s; }
.nav a:hover::after { right:0; }
.menu-button { display:none; border:0; background:transparent; padding:8px; }
.menu-button span { display:block; width:22px; height:2px; margin:4px; background:var(--ink); }

.hero { min-height: calc(100vh - 76px); display:grid; grid-template-columns: 1.05fr .95fr; gap:72px; align-items:center; padding-block: 78px; }
.hero::before { content:""; position:absolute; width:500px; height:500px; border-radius:50%; background:#e9efe9; filter:blur(1px); left:-260px; top:120px; z-index:-1; }
.eyebrow { margin:0 0 16px; text-transform:uppercase; letter-spacing:.19em; font-size:.75rem; font-weight:700; color:var(--green); }
.eyebrow.light { color:#cfe0d6; }
h1,h2,h3 { font-family:"Playfair Display", Georgia, serif; line-height:1.12; margin-top:0; }
h1 { font-size:clamp(3rem, 6vw, 5.8rem); letter-spacing:-.045em; margin-bottom:24px; max-width:850px; }
h2 { font-size:clamp(2.3rem,4vw,4rem); letter-spacing:-.035em; margin-bottom:22px; }
h3 { font-size:1.45rem; }
.hero-intro { max-width:630px; font-size:1.14rem; color:var(--muted); }
.hero-actions { display:flex; gap:14px; margin:34px 0 42px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; padding:14px 22px; border-radius:999px; font-weight:700; transition:.25s; }
.button-primary { background:var(--deep); color:#fff; box-shadow:0 10px 28px rgba(16,53,46,.22); }
.button-primary:hover { transform:translateY(-2px); }
.button-secondary { border:1px solid var(--line); background:#fff; }
.quick-facts { display:flex; gap:34px; padding-top:8px; }
.quick-facts div { display:grid; }
.quick-facts strong { font-family:"Playfair Display"; font-size:1.45rem; }
.quick-facts span { font-size:.78rem; color:var(--muted); }
.hero-visual { position:relative; min-height:650px; display:grid; place-items:center; }
.portrait-frame { width:min(470px,90%); aspect-ratio:4/5; border-radius:220px 220px 28px 28px; overflow:hidden; box-shadow:var(--shadow); border:10px solid #fff; }
.portrait-frame img { width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.floating-card { position:absolute; background:rgba(255,253,248,.94); border:1px solid rgba(24,51,45,.12); box-shadow:0 15px 40px rgba(17,50,43,.13); padding:14px 18px; border-radius:16px; font-weight:700; }
.floating-card small { color:var(--muted); font-weight:500; }
.card-top { right:0; top:18%; }
.card-bottom { left:0; bottom:13%; color:var(--green); }

.marquee { overflow:hidden; background:var(--deep); color:#fff; padding:17px 0; }
.marquee-track { width:max-content; display:flex; gap:28px; align-items:center; animation:scroll 28s linear infinite; font-size:.86rem; text-transform:uppercase; letter-spacing:.14em; }
.marquee-track i { color:var(--gold); font-style:normal; }
@keyframes scroll { to { transform:translateX(-50%); } }

.content-section, .family-section { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; padding-block:120px; }
.body-copy p { font-size:1.08rem; margin:0 0 20px; color:#40534c; }
.timeline-section { padding-bottom:120px; }
.centered { text-align:center; max-width:720px; margin:0 auto 52px; }
.timeline { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.timeline-card { padding:34px; border:1px solid var(--line); border-radius:24px; background:#fff; min-height:250px; transition:.25s; }
.timeline-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.timeline-number { color:var(--gold); font-weight:700; font-size:.78rem; letter-spacing:.12em; }
.timeline-card h3 { margin:45px 0 10px; font-size:1.75rem; }
.timeline-card p { color:var(--muted); }

.profile-section { padding-block:40px 120px; }
.profile-panel { background:var(--deep); color:#fff; border-radius:32px; padding:clamp(32px,6vw,72px); display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; overflow:hidden; position:relative; }
.profile-panel::after { content:""; position:absolute; width:360px; height:360px; border:1px solid rgba(255,255,255,.13); border-radius:50%; right:-190px; top:-180px; }
.profile-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0 30px; margin:0; }
.profile-grid div { padding:17px 0; border-bottom:1px solid rgba(255,255,255,.14); }
dt { color:#aac2b7; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px; }
dd { margin:0; font-weight:600; }

.interests-section { padding-bottom:120px; }
.interest-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.interest-card { border-top:1px solid var(--line); padding:30px 14px 10px 0; }
.interest-icon { font-size:1.6rem; color:var(--gold); }
.interest-card h3 { margin:30px 0 10px; }
.interest-card p { color:var(--muted); font-size:.94rem; }
.family-section { background:var(--cream); width:100%; max-width:none; padding-inline:max(22px, calc((100vw - 1180px)/2)); }
.family-note { max-width:470px; color:var(--muted); }
.family-list article { padding:0 0 27px; margin-bottom:27px; border-bottom:1px solid var(--line); }
.family-list span { color:var(--green); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:700; }
.family-list h3 { margin:6px 0 8px; }
.family-list p { margin:0; color:#53645d; }
details { border-bottom:1px solid var(--line); padding-bottom:22px; }
summary { cursor:pointer; font-weight:700; }
details p { margin-top:14px; }

.looking-section { background:linear-gradient(135deg,#173f38,#0e2e28); color:#fff; padding-block:115px; text-align:center; }
.looking-inner { max-width:940px; }
.looking-inner > p:not(.eyebrow) { max-width:700px; margin:0 auto; color:#d3e2dc; font-size:1.08rem; }
.values-row { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:36px; }
.values-row span { padding:10px 16px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(255,255,255,.05); }
footer { background:#0a211d; color:#d9e4df; padding:34px 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.footer-inner > div { display:flex; align-items:center; gap:12px; }
.footer-inner p { margin:0; line-height:1.35; }
.footer-inner small, .privacy { color:#8ea79d; }
footer a { font-weight:700; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.12s; }.delay-2{transition-delay:.22s}.delay-3{transition-delay:.32s}

@media (max-width: 900px) {
  .menu-button { display:block; }
  .nav { position:absolute; top:76px; left:0; right:0; display:none; flex-direction:column; gap:0; background:var(--paper); border-bottom:1px solid var(--line); padding:10px 22px 20px; }
  .nav.open { display:flex; }
  .nav a { padding:12px 0; }
  .hero { grid-template-columns:1fr; gap:28px; padding-top:55px; }
  .hero-visual { min-height:560px; }
  .content-section, .family-section, .profile-panel { grid-template-columns:1fr; gap:42px; }
  .timeline { grid-template-columns:1fr; }
  .timeline-card { min-height:auto; }
  .timeline-card h3 { margin-top:24px; }
  .interest-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px) {
  .section-shell { width:min(100% - 28px,1180px); }
  .site-header { padding-inline:14px; }
  .brand span:last-child { display:none; }
  h1 { font-size:3.25rem; }
  .hero { padding-block:42px 65px; }
  .hero-visual { min-height:470px; }
  .portrait-frame { width:90%; }
  .floating-card { font-size:.8rem; padding:10px 12px; }
  .card-top { right:-2px; }.card-bottom{left:-2px;}
  .quick-facts { gap:18px; justify-content:space-between; }
  .content-section, .family-section { padding-block:80px; }
  .profile-section { padding-bottom:80px; }
  .profile-grid { grid-template-columns:1fr; }
  .interest-grid { grid-template-columns:1fr; }
  .footer-inner { flex-direction:column; text-align:center; }
  .privacy { order:3; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}
