/* ═══════════════════════════════════════════════════════════════
   typography.css — sitewide type system
   Loaded after new-style.css so it overrides the old Poppins defaults.
   Page-scoped systems (.vx on the homepage) use class selectors and so
   still win over the element rules here.

   Why each decision, not just what:

   1. BODY IN INTER, NOT POPPINS.
      Poppins is geometric — near-circular o/c/e, uniform stroke weight,
      low differentiation between letterforms. Readers identify words by
      their outline shape, not letter by letter, so low-differentiation
      faces measurably slow reading at body sizes. Inter is drawn for
      screen text: tall x-height, open apertures, distinct l/I/1. Poppins
      stays available for nothing — it was the wrong tool for running text.

   2. PLAYFAIR FOR DISPLAY.
      Pairing works when the two faces differ in CLASSIFICATION, not just
      weight. A high-contrast serif against a neutral grotesque reads as a
      deliberate pairing; two sans-serifs read as an accident. The serif
      also carries an age/authority association, which is true here — the
      business is 35 years old.

   3. A REAL SCALE (1.25, major third).
      Sizes derived from one ratio look composed; arbitrary sizes look
      generated. Every step below is 1.25x its neighbour.

   4. MEASURE CAPPED AT ~68ch.
      Past roughly 75 characters the eye loses the line on the return
      sweep and re-reads the same line. Applied via .prose so it can't
      break grid/card layouts.

   5. LEADING INVERSE TO SIZE.
      Long lines need more leading to keep the return sweep accurate;
      large display type needs less or it fragments into separate lines.

   6. OPTICAL TRACKING.
      Large type looks loose at default spacing, so display gets negative
      tracking. Uppercase micro-labels look cramped, so they get positive.

   7. INK, NOT BLACK.
      Pure #000 on #fff maximises halation — the glare that makes text
      shimmer. #24303a keeps contrast well past WCAG AA without it.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Inter';src:url('/fonts/inter-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --f-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --f-display:'Playfair Display',Georgia,'Times New Roman',serif;

  /* major-third scale (1.25), fluid between 360px and 1280px viewports */
  --t-xs:  clamp(0.75rem, 0.72rem + 0.12vw, 0.813rem);
  --t-sm:  clamp(0.875rem, 0.85rem + 0.13vw, 0.938rem);
  --t-base:clamp(1rem, 0.97rem + 0.16vw, 1.063rem);
  --t-md:  clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem);
  --t-lg:  clamp(1.35rem, 1.24rem + 0.55vw, 1.563rem);
  --t-xl:  clamp(1.62rem, 1.42rem + 0.98vw, 1.953rem);
  --t-2xl: clamp(1.94rem, 1.6rem + 1.7vw, 2.441rem);
  --t-3xl: clamp(2.33rem, 1.77rem + 2.8vw, 3.052rem);

  --lh-tight:1.14;
  --lh-snug:1.3;
  --lh-body:1.7;

  --ink:#24303a;
  --ink-soft:#55636e;
  --ink-faint:#8b959c;
  --measure:68ch;
}

/* ── base ───────────────────────────────────────────────────── */
html{ -webkit-text-size-adjust:100%; }

body{
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:var(--lh-body);
  color:var(--ink);
  font-synthesis-weight:none;          /* never fake a missing weight */
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ── headings: display serif, real scale, balanced wrapping ── */
h1,h2,h3,h4,h5,h6{
  font-family:var(--f-display);
  color:var(--ink);
  font-weight:700;
  line-height:var(--lh-tight);
  letter-spacing:-.018em;              /* large type looks loose untracked */
  text-wrap:balance;                   /* no single-word last lines */
  margin:0 0 .5em;
}
h1{font-size:var(--t-3xl)}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-xl);line-height:var(--lh-snug);letter-spacing:-.014em}
/* h4-h6 are sub-labels, not display — the sans reads better small */
h4,h5,h6{font-family:var(--f-body);line-height:var(--lh-snug);letter-spacing:-.008em}
h4{font-size:var(--t-lg);font-weight:600}
h5{font-size:var(--t-md);font-weight:600}
h6{font-size:var(--t-base);font-weight:600}

/* ── running text ───────────────────────────────────────────── */
p,li,dd{font-size:var(--t-base);line-height:var(--lh-body)}
p{margin:0 0 1.15em}
strong,b{font-weight:600;color:var(--ink)}   /* 700 next to 400 is a jolt */
small{font-size:var(--t-sm)}

/* Measure. Scoped to .prose so cards, tables and grids are untouched —
   an unscoped max-width on <p> would collapse existing layouts. */
.prose{max-width:var(--measure)}
.prose p,.prose li{color:var(--ink-soft)}
.prose h2,.prose h3{margin-top:1.6em}
.prose > *:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.35em;margin:0 0 1.15em}
.prose li{margin-bottom:.4em}
.prose a{color:inherit;text-decoration:underline;text-underline-offset:.16em;
  text-decoration-thickness:.06em;text-decoration-color:rgba(36,48,58,.32)}
.prose a:hover{text-decoration-color:currentColor}

/* ── micro-labels: uppercase needs air, lowercase doesn't ───── */
.eyebrow,.label,.kicker,.overline{
  font-family:var(--f-body);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.4}

/* ── numerals ───────────────────────────────────────────────── */
/* Prices and figures line up in columns; default proportional digits
   make ₹22,500 and ₹1,20,000 ragged against each other. */
.price,.amount,.stat,.num,table td,table th{font-variant-numeric:tabular-nums}

/* ── retire the decorative script ───────────────────────────── */
/* Pinyon Script was the strongest generated-design signal on the site.
   Anything still marked .pinyon falls back to the display serif in
   italic rather than disappearing. */
.pinyon{font-family:var(--f-display)!important;font-style:italic;font-weight:400}

/* ── forms and controls inherit the text face ───────────────── */
input,select,textarea,button{font-family:inherit;font-size:var(--t-sm)}

/* ── keep long words from breaking narrow columns ───────────── */
h1,h2,h3,p,li{overflow-wrap:break-word}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}