/* Pitrupaksha — design tokens
 * Spiritual iOS: editorial warmth + iOS surfaces
 */
:root {
  /* Palette */
  --ivory: #F6F1E6;
  --ivory-2: #EFE7D6;
  --ivory-3: #E6DCC6;
  --paper: #FBF7EE;
  --ink: #1A1613;
  --ink-2: #2B2520;
  --ink-soft: #4A4239;
  --stone: #8F8578;
  --stone-2: #B8AE9E;
  --gold: #B8893A;
  --gold-deep: #8C6623;
  --gold-soft: #D9BE82;
  --vermillion: #A63D2A;
  --vermillion-soft: #C56A52;
  --vermillion-deep: #5A1A10;
  --sage: #6B7A5A;
  --line: rgba(26,22,19,0.10);
  --line-2: rgba(26,22,19,0.06);

  /* Fonts (tweakable) */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-body: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radius — iOS-ish */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Shadows — soft, directional */
  --shadow-sm: 0 1px 2px rgba(26,22,19,0.06), 0 1px 1px rgba(26,22,19,0.04);
  --shadow-md: 0 8px 24px -12px rgba(26,22,19,0.18), 0 2px 6px rgba(26,22,19,0.06);
  --shadow-lg: 0 24px 60px -24px rgba(26,22,19,0.28), 0 8px 20px -12px rgba(26,22,19,0.12);
  --shadow-gold: 0 12px 32px -16px rgba(184,137,58,0.5);

  /* Motion */
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "onum";
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

/* Paper grain texture — very subtle */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(rgba(26,22,19,0.03) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.5;
  mix-blend-mode: multiply;
}

.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* iOS-style frosted surface */
.glass {
  background: rgba(251, 247, 238, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255,255,255,0.6);
}

/* Utility button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: transform 0.18s var(--ease-ios), background 0.18s, box-shadow 0.18s;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { background: var(--ink-2); box-shadow: var(--shadow-lg); }

.btn-gold {
  background: linear-gradient(180deg, #C99A4A 0%, #A97826 100%);
  color: var(--paper);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover { filter: brightness(1.05); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { background: rgba(26,22,19,0.04); }

/* Placeholder block for imagery */
.placeholder {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(26,22,19,0.05) 0px,
      rgba(26,22,19,0.05) 1px,
      transparent 1px,
      transparent 10px
    ),
    linear-gradient(135deg, #E9DFC8 0%, #D8CBA8 100%);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.placeholder-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(26,22,19,0.55);
  background: rgba(251,247,238,0.75);
  padding: 6px 10px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
}

/* Scrollbar — subtle */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(26,22,19,0.18); border-radius: 10px; border: 2px solid var(--ivory); }
::-webkit-scrollbar-track { background: transparent; }

/* Section container */
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}

/* Divider ornament */
.rule {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--stone);
}
.rule::before, .rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* iOS segmented control */
.segmented {
  display: inline-flex;
  padding: 4px;
  background: rgba(26,22,19,0.06);
  border-radius: var(--r-pill);
  gap: 2px;
}
.segmented button {
  border: none;
  background: transparent;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  font-size: 14px;
  color: var(--ink-soft);
  transition: all 0.22s var(--ease-ios);
}
.segmented button.active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* Card */
.card {
  background: var(--paper);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
}

/* Tag / chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(184,137,58,0.12);
  color: var(--gold-deep);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chip.ink {
  background: rgba(26,22,19,0.06);
  color: var(--ink-soft);
}
.chip.vermillion {
  background: rgba(166,61,42,0.1);
  color: var(--vermillion);
}

/* ============================================================
 * RESPONSIVE — tablet and mobile breakpoints
 * Applied globally so all page layouts adapt without per-page work
 * ============================================================ */

/* Tablet — collapse 4-col grids to 2, tighten hero type */
@media (max-width: 1024px) {
  .wrap { padding: 0 28px !important; }
  h1 { font-size: clamp(44px, 7vw, 76px) !important; line-height: 1 !important; }
  h2 { font-size: clamp(32px, 5vw, 54px) !important; }

  /* Any 4-col grid → 2-col */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="gridTemplateColumns:'repeat(4, 1fr)'"],
  [style*="gridTemplateColumns:'repeat(4,1fr)'"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Nav links take too much room at tablet — hide them, keep logo + CTA.
   * NOTE: selector is `nav[data-nav-links]` (no space) because the attribute
   * lives ON the <nav> element itself in templates/partials/shell/nav.php:47,
   * not on a descendant. Pre-C.20 the rule had a stray space and silently
   * never fired — fixed in C.20 browser-verify wave. */
  nav[data-nav-links] { display: none !important; }
}

/* Mobile — everything goes to single column, dial type down */
@media (max-width: 720px) {
  .wrap { padding: 0 20px !important; }
  h1 { font-size: clamp(40px, 10vw, 56px) !important; letter-spacing: -0.03em !important; }
  h2 { font-size: clamp(28px, 7vw, 40px) !important; }
  h3 { font-size: clamp(20px, 5vw, 24px) !important; }

  /* Collapse every multi-col grid to 1-col — aggressive but correct for mobile */
  [style*="grid-template-columns"],
  [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Nav — hide secondary links on mobile, keep logo + CTA.
   * Same selector fix as the 1024px block above — attribute is on <nav>. */
  nav[data-nav-links] { display: none !important; }

  /* Reduce large section padding */
  section { padding-top: 60px !important; padding-bottom: 60px !important; }

  /* Flex rows that need to stack */
  [style*="display:'flex'"][style*="justifyContent:'space-between'"] {
    flex-wrap: wrap !important;
  }

  /* Tweaks panel — shrink or push off-screen */
  .tweaks-panel { transform: scale(0.85) !important; transform-origin: bottom right !important; }
}

/* Print — clean typography, no backgrounds */
@media print {
  nav, footer, .tweaks-panel, [data-screen-label]::after { display: none !important; }
  body { background: white !important; color: black !important; }
  .placeholder { border: 1px solid #ccc !important; }
}