/* Kasibhatlas family sites — shared design system.
   Each site sets its --accent color inline (from the sites.accent_color DB field);
   everything else stays consistent across the family. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --paper: #F7F3ED;
  --ink: #262220;
  --ink-soft: #5B534C;
  --line: #DCD4C8;
  --accent: #6B5B4D; /* overridden per-site */
  --accent-tint: #6B5B4D14;
  --radius: 4px;
  --measure: 62ch;
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}
h1,h2,h3{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 .4em;
  color: var(--ink);
}
a{ color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img{ max-width:100%; display:block; }

.wrap{ max-width: 860px; margin: 0 auto; padding: 0 24px; }

.site-header{
  padding: 28px 0 0;
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding-bottom:20px; }
.brand{ font-family:'Fraunces', serif; font-weight:600; font-size:1.05rem; color:var(--ink); text-decoration:none; }
.site-nav a{ margin-left:20px; color: var(--ink-soft); font-size:.95rem; text-decoration:none; }
.site-nav a:hover{ color: var(--accent); }

section{ padding: 56px 0; border-bottom: 1px solid var(--line); }
section:last-of-type{ border-bottom:none; }

/* Hero */
.hero h1{ font-size: clamp(2.1rem, 4.4vw, 3.1rem); max-width: 14ch; }
.hero .tagline{ color: var(--ink-soft); font-size: 1.15rem; margin-top: 10px; max-width: var(--measure); }
.hero .lede{ margin-top: 22px; max-width: var(--measure); }

/* Generic section heading */
.section-head{ margin-bottom: 26px; padding-left: 18px; border-left: 3px solid var(--accent); }
.section-head h2{ font-size: 1.5rem; }
.section-head .sub{ color: var(--ink-soft); margin-top: 2px; }

.prose{ max-width: var(--measure); }
.prose p{ margin: 0 0 1em; }

/* Family index cards (main site) */
.family-list{ display:flex; flex-direction:column; gap:0; }
.family-item{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding: 20px 0; border-top: 1px solid var(--line);
}
.family-item:first-child{ border-top:none; }
.family-item .who{ font-family:'Fraunces', serif; font-size:1.25rem; }
.family-item .desc{ color: var(--ink-soft); font-size:.95rem; margin-top:4px; max-width: 46ch; }
.family-item .go{ white-space:nowrap; font-size:.95rem; font-weight:500; }

/* Gallery */
.gallery-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:10px; }
.gallery-grid img{ width:100%; height:150px; object-fit:cover; border-radius: var(--radius); background: var(--line); }
.gallery-empty{ color: var(--ink-soft); font-style: italic; }

/* Timeline */
.timeline-item{ padding-left: 20px; border-left: 2px solid var(--line); margin-bottom: 18px; position:relative; }
.timeline-item::before{ content:''; position:absolute; left:-5px; top:5px; width:8px; height:8px; border-radius:50%; background: var(--accent); }
.timeline-item .when{ color: var(--ink-soft); font-size:.85rem; }
.timeline-item .what{ font-weight:500; margin-top:2px; }

/* Contact */
.contact-links{ display:flex; flex-wrap:wrap; gap: 10px 20px; margin-top: 14px; }
.contact-links a{ font-weight:500; }

footer.site-footer{ padding: 30px 0 50px; color: var(--ink-soft); font-size:.9rem; }

@media (max-width: 560px){
  section{ padding: 40px 0; }
  .family-item{ flex-direction: column; gap: 6px; }
}