/* Typography layer. Loaded last, after fonts.css and the four page stylesheets.
   English: Playfair Display (headings) + Inter (interface, body). Tamil: Noto Serif Tamil (headings) + Noto Sans Tamil.
   The font stacks live in --serif / --sans (styles.css). The Tamil faces only cover Tamil code points, so one stack
   serves both languages: Latin falls to Playfair/Inter, Tamil falls to the Noto faces.
   Sizes: 16px floor for menu, labels, inputs, buttons and body copy; 14px for hints. Line height: English 1.6, Tamil 1.75,
   Tamil headings 1.45. Palette: see the token block below (heading maroon #721e3a, body #30262a, background #fcf5ee). */
/* Design tokens: the single place the colours are settled. styles.css, journey.css, premium.css and polish.css each redefine
   some of these in turn, so the value that was winning at the end of that chain is written out here, in the last stylesheet,
   and nothing earlier can change it. Spacing and radius tokens are new. Small text uses --muted (5:1 or better on every
   cream and white surface) and --gold-text; plain --gold is for large display text, ornaments and borders only. */
:root {
  --wine: #721e3a; --wine-dark: #4f1830; --gold: #ac8247; --gold-light: #e3c18b;
  --cream: #fcf5ee; --paper: #fffdfa; --ink: #30262a; --line: #eaded5;
  --muted: #6e6058; --gold-text: #86591a;
  --mauve: var(--wine); --mauve-dark: var(--wine-dark);
  --space-section: clamp(64px, 8vw, 112px);
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
}
:root {
  --fs-hero: clamp(28px, 2.4vw + 18px, 44px);
  --fs-section: clamp(22px, 1.6vw + 16px, 30px);
  --fs-card: 20px;
  --fs-body: 16px;
  --fs-ui: 16px;
  --fs-hint: 14px;
  --lh: 1.6;
  --lh-head: 1.25;
}
:lang(ta) { --lh: 1.75; --lh-head: 1.45; }

body { font-family: var(--sans); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh); color: var(--ink); background: var(--cream); letter-spacing: normal; }
p, li, dd, td { line-height: var(--lh); }
:lang(ta), :lang(ta) * { letter-spacing: normal; }

/* headings: section headings in the display face, card headings and names in the interface face */
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: var(--lh-head); }
h3, h4 { font-family: var(--sans); font-weight: 600; line-height: var(--lh-head); }
strong, b, th { font-weight: 600; }
em, i { font-style: normal; }
.discovery-bottom p, .keepsake-cover span, .footer-invitation p, .saved-search-empty { font-style: normal; }

/* profile names are Inter SemiBold even where they are large */
.profile-name-row h3, .member-card h3, .detail-title-row h2, .refined-name-row h2 { font-family: var(--sans); font-weight: 600; }

/* menu and navigation: Medium */
.desktop-nav, .desktop-nav a, .mobile-nav a, .mobile-nav button, .member-side-nav > button, .mobile-bottom-nav > a, .mobile-bottom-nav > button { font-weight: 500; }

/* form labels: Medium; text typed into a field: Regular */
label, .form-field, .form-field > span, .search-fields > label > span, .hero-registration .form-field > span { font-weight: 500; }
input, select, textarea { font-family: var(--sans); font-weight: 400; color: var(--ink); }

/* buttons and actions (Register, Login, Send interest, View profile): SemiBold */
.button, .nav-register, .interest-button, .login-link, .language-button, .hero-login button, .profile-card-actions .text-link { font-weight: 600; }

/* prices and other amounts */
.premium-panel-copy strong { font-weight: 600; }

/* larger text needs more room: three plan cards no longer fit side by side on tablets */
.plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .plan-grid { grid-template-columns: minmax(0, 1fr); max-width: 480px; } }

/* phone header and tabs: the 16px text needs the logo lockup and the gaps to give way */
@media (max-width: 700px) {
  .nav-shell, .nav-actions { gap: 6px; }
  .brand-mark { width: 38px; height: 32px; }
  .brand-word b { font-size: 22px; }
  .brand-word > span { font-size: 10px; letter-spacing: 1.2px; }
  .nav-register { padding: 8px 10px; min-height: 40px; white-space: nowrap; }
  .profile-tabs > button { padding: 9px 6px; gap: 4px; }
}
@media (max-width: 480px) {
  .nav-register { white-space: normal; max-width: 96px; line-height: 1.3; text-align: center; padding: 6px 8px; }
}
@media (max-width: 400px) {
  .profile-tabs > button { padding: 9px 4px; }
  .profile-tabs .icon { display: none; }
}
@media (max-width: 480px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .progress-steps { flex-wrap: wrap; row-gap: 8px; }
  .progress-line { display: none; }
}

/* member area: rows that held 9-12px text must wrap now that the text is 16px */
small, .completion-ring > small { font-size: var(--fs-hint); }
.filter-heading, .member-filter-actions, .member-saved-searches { flex-wrap: wrap; }
@media (max-width: 700px) { .filter-heading h2 { max-width: none; } }
.check-field { font-size: var(--fs-ui); }