/* ==========================================================
   Tavacoli family site
   Palette: lapis #16437E · turquoise #23A69A · saffron #E3A63B
            brick #B4573E · sand #F5EDDC · ink #22262E
   Type: Markazi Text (display) · Figtree (body)
   ========================================================== */

:root{
  --lapis:#3D5470;        /* muted slate blue */
  --lapis-deep:#26333F;   /* deep slate */
  --turquoise:#5F8B85;    /* faded teal */
  --saffron:#B99B5F;      /* soft antique gold */
  --brick:#96604C;        /* quiet clay */
  --sand:#EAE6DB;
  --sand-deep:#DCD5C6;
  --ink:#2A2D33;
  --paper:#F5F3EE;
  --display:"Italiana",serif;
  --body:"Alegreya Sans",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
}
a{color:var(--lapis)}
a:focus-visible,button:focus-visible{outline:3px solid var(--saffron);outline-offset:2px}
code{background:var(--sand-deep);padding:.1em .4em;border-radius:4px;font-size:.92em}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.7rem clamp(1rem,4vw,3rem);
  background:var(--lapis-deep);color:var(--sand);
}
.brand{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-size:1.45rem;letter-spacing:.05em;
  color:var(--sand);text-decoration:none;
}
.brand-star{width:1.1em;height:1.1em;fill:var(--saffron)}
.site-header nav{display:flex;gap:clamp(.8rem,2.5vw,1.8rem);flex-wrap:wrap}
.site-header nav a{color:var(--sand);text-decoration:none;font-weight:500}
.site-header nav a:hover{color:var(--saffron)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:86vh;display:grid;place-items:center;padding:clamp(2rem,6vw,5rem) 1rem;overflow:hidden}
.hero-tiles{position:absolute;inset:0}
.hero-tiles svg{display:block;width:100%;height:100%}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 65%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,26,34,.25),rgba(20,26,34,.55) 70%,rgba(20,26,34,.72))}
.hero-panel{
  position:relative;max-width:46rem;text-align:center;
  color:#F1EEE6;
  padding:clamp(1.6rem,4vw,3rem) clamp(1.4rem,5vw,3.5rem);
  border-top:1px solid rgba(241,238,230,.5);
  border-bottom:1px solid rgba(241,238,230,.5);
}
.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.8rem,8vw,5.4rem);line-height:1.04;
  letter-spacing:.04em;
}
.hero-sub{max-width:34rem;margin:1rem auto 1.6rem;color:#DDD8CC;font-size:1.05rem}
.hero-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;font-weight:600;
  padding:.65rem 1.3rem;border-radius:2rem;border:2px solid var(--lapis);
}
.btn-solid{background:var(--lapis);color:var(--paper);border-color:var(--lapis)}
.btn-solid:hover{background:var(--lapis-deep);border-color:var(--lapis-deep)}
.btn-ghost{background:transparent;color:inherit;border-color:currentColor}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.section .btn-ghost,.mail-row .btn-ghost{color:var(--lapis)}
.section .btn-ghost:hover,.mail-row .btn-ghost:hover{background:var(--sand-deep)}
.btn-small{padding:.3rem .9rem;font-size:.9rem}

/* ---------- sections ---------- */
.section{padding:clamp(2.5rem,7vw,5rem) clamp(1rem,5vw,4rem);max-width:72rem;margin:0 auto}
.section-tinted{max-width:none;background:var(--sand)}
.section-tinted > *{max-width:72rem;margin-left:auto;margin-right:auto}
.section h2{
  font-family:var(--display);font-weight:400;letter-spacing:.03em;
  font-size:clamp(2.1rem,4.5vw,3.1rem);color:var(--lapis-deep);
}
.section-lede{max-width:44rem;margin:.4rem 0 2rem;color:#4b4f58}

/* ---------- family ---------- */
.family-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.member{text-align:center}
.arch{
  width:min(13rem,80%);aspect-ratio:3/4;margin:0 auto 1rem;
  clip-path:polygon(0 100%,0 32%,8% 16%,25% 5%,50% 0,75% 5%,92% 16%,100% 32%,100% 100%);
  overflow:hidden;display:grid;place-items:center;
}
.arch img{width:100%;height:100%;object-fit:cover}
.arch-lapis{background:var(--lapis)}
.arch-turquoise{background:var(--turquoise)}
.arch-saffron{background:var(--saffron)}
.arch-brick{background:var(--brick)}
.arch .monogram{
  font-family:var(--display);font-size:5rem;font-weight:700;color:var(--paper);
}
.member h3{font-family:var(--display);font-size:1.9rem;letter-spacing:.05em;color:var(--lapis-deep)}
.member-role{font-size:.95rem;color:#4b4f58;min-height:3em}
.member-links{display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem}
.member-links a{font-weight:500}
.member-page{font-size:.9rem;color:var(--brick)}

/* ---------- mail ---------- */
.mail-grid{display:grid;gap:.6rem;max-width:44rem}
.mail-row{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--sand-deep);
  padding:.7rem 1rem;border-radius:.6rem;font-weight:500;
}
.mail-actions{display:flex;gap:.5rem}
.mail-note{margin-top:1.2rem;font-size:.9rem;color:#4b4f58;max-width:44rem}

/* ---------- calendar ---------- */
.cal-shell{border:2px solid var(--lapis);border-radius:.8rem;overflow:hidden;background:#fff}
.cal-head{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--lapis);color:var(--sand);padding:.5rem 1rem;
}
.cal-head h3{font-family:var(--display);font-size:1.5rem;letter-spacing:.05em}
.cal-nav{
  background:none;border:none;color:var(--sand);font-size:1.8rem;
  cursor:pointer;line-height:1;padding:0 .6rem;border-radius:.4rem;
}
.cal-nav:hover{background:var(--lapis-deep)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-dow{
  padding:.4rem;text-align:center;font-size:.8rem;font-weight:600;
  background:var(--sand);color:var(--lapis-deep);
}
.cal-cell{min-height:4.6rem;border-top:1px solid var(--sand-deep);border-left:1px solid var(--sand-deep);padding:.25rem .35rem;font-size:.85rem}
.cal-cell:nth-child(7n+1){border-left:none}
.cal-cell.is-other{color:#b9b2a2;background:#faf6ec}
.cal-cell.is-today .cal-date{background:var(--brick);color:#fff;border-radius:50%}
.cal-date{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;font-weight:600}
.cal-event{
  display:block;margin-top:.15rem;padding:.1rem .35rem;border-radius:.3rem;
  background:var(--turquoise);color:#fff;font-size:.72rem;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cal-event.tag-birthday{background:var(--saffron);color:#fff}
.cal-event.tag-trip{background:var(--brick)}
.cal-upcoming{margin-top:1.6rem}
.cal-upcoming h3{font-family:var(--display);font-size:1.6rem;letter-spacing:.04em;color:var(--lapis-deep)}
.cal-upcoming ul{list-style:none;margin-top:.5rem}
.cal-upcoming li{padding:.35rem 0;border-bottom:1px dashed var(--sand-deep)}
.cal-upcoming .up-date{font-weight:600;color:var(--brick);margin-right:.6rem}

/* ---------- heritage ---------- */
.era-grid{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.era-visual{
  position:relative;aspect-ratio:4/3;border-radius:.7rem;overflow:hidden;
  border:3px solid var(--lapis-deep);
}
.era-visual svg{position:absolute;inset:0;width:100%;height:100%}
.era-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.era figcaption{margin-top:.7rem;font-size:.92rem;color:#4b4f58}
.era figcaption strong{color:var(--lapis-deep)}

/* ---------- footer ---------- */
.site-footer{
  background:var(--lapis-deep);color:var(--sand);
  display:flex;gap:.6rem;align-items:center;justify-content:center;
  padding:1.4rem 1rem;margin-top:2rem;text-align:center;flex-wrap:wrap;
}
.site-footer .brand-star{width:1.4rem;height:1.4rem;fill:var(--saffron)}
.site-footer .credit{width:100%;font-size:.78rem;color:#B9B4A8}