/* Somurobo family layout (2026-10-18): same container, gutters, header bar,
   footer spacing and "बड़े अक्षर" button as Numerology Design A. Screen only
   (print/report output untouched); colours stay Vastu's own. */
@media screen {
:root { --family-container: 1320px; --family-gutter: 16px; --family-bar: 64px; }
@media (min-width: 768px) { :root { --family-gutter: 24px; } }
@media (min-width: 1280px) { :root { --family-gutter: 48px; --family-bar: 72px; } }
html[data-large-type=true] { font-size: 20px; }

.container { box-sizing: border-box; max-width: var(--family-container); padding-left: var(--family-gutter); padding-right: var(--family-gutter); }
.nav-wrap { height: auto; min-height: var(--family-bar); gap: 12px; }
.nav-links a { white-space: nowrap; }
@media (max-width: 1439px) { .nav-links { gap: 2px; } .nav-links a { padding: 8px 9px; font-size: 13.5px; } }

.family-large-type { flex: 0 0 auto; min-height: 44px; min-width: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; }
.family-large-type > span:last-child { color: var(--brand); font-weight: 700; }
.family-large-type[aria-pressed=true] { border-color: var(--brand); }
.nav-toggle { min-width: 44px; min-height: 44px; }

.site-footer { margin-top: 32px; padding: 32px 0 24px; }

/* Tablet: two columns. */
@media (min-width: 768px) and (max-width: 1279px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 900px) {
  .grid-2:not(form .grid-2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Long guide pages (.prose): wide container, sections in two columns on
   tablet+ (tables and the intro full width) — same idea as Numerology's
   article pages. family-layout.js only groups h2 + its content. */
.prose.family-sections { max-width: none; }
@media (min-width: 768px) {
  .prose.family-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-items: start; }
  .prose.family-sections > * { grid-column: 1 / -1; }
  .prose.family-sections > .family-section { grid-column: auto; min-width: 0; }
  .prose.family-sections > .family-section.family-wide { grid-column: 1 / -1; }
  .prose.family-sections > .family-intro { max-width: 75ch; }
}
@media (max-width: 767px) {
  .nav-wrap { gap: 6px; }
  .family-large-type { padding: 6px; }
  .family-large-type-label { display: none; }
}
@media (max-width: 420px) {
  /* create/compare also carry the English/हिंदी switch: keep the ॐ mark, drop the word. */
  .nav-wrap:has(#lang-switch:not(:empty)) .brand-name { display: none; }
}
}