/* ============================================================
   Shared portfolio furniture — Madhu Kamath · Designs on Life

   The static pages grew up separately: Beyond the Numbers and
   its subpages, Comprehend, Who and New Canvas are Georgia
   articles; Pulse, Cross-Border and Smritinsha use Cormorant;
   Health Intelligence had its own sans-serif palette. Each also
   had its own idea of a nav, and four pages had none at all.

   This file does NOT restyle the body copy of those pages. The
   different reading textures are allowed to stay — what it does
   is give every page the same masthead, the same footer, the
   same accent palette and the same heading voice, so they read
   as chapters of one portfolio rather than separate sites.

   Load it after the page's own <style> block so these tokens win.
   ============================================================ */

:root {
  --mk-gold: #a8823f;
  --mk-gold-soft: rgba(168, 130, 63, 0.28);
  --mk-brown: #6b4b2f;
  --mk-ink: #332a22;
  --mk-silk: #fbf9f5;
  --mk-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mk-label: "Cormorant SC", Georgia, serif;
  --mk-measure: 1180px;
}

/* ---- masthead ------------------------------------------------ */

.mk-mast {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: var(--mk-measure);
  margin: 0 auto;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--mk-gold-soft);
}

.mk-mast-brand {
  text-decoration: none;
  display: block;
  line-height: 1;
}

.mk-mast-name {
  display: block;
  font-family: var(--mk-display);
  font-style: italic;
  font-size: 26px;
  color: var(--mk-ink);
  letter-spacing: 0.01em;
}

.mk-mast-sub {
  display: block;
  margin-top: 5px;
  font-family: var(--mk-label);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--mk-gold);
}

.mk-mast-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 6px;
  font-family: var(--mk-label);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mk-mast-nav a {
  color: var(--mk-brown);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.mk-mast-nav a:hover,
.mk-mast-nav a:focus-visible {
  border-bottom-color: var(--mk-gold);
}

/* the page you are on, named rather than linked */
.mk-mast-here {
  color: var(--mk-ink);
  border-bottom: 1px solid var(--mk-gold);
  padding-bottom: 2px;
}

/* ---- headings: one voice across every page ------------------- */

.mk-shared h1,
.mk-shared h2,
.mk-shared h3 {
  font-family: var(--mk-display);
  font-weight: 400;
  color: var(--mk-brown);
}

/* ---- footer -------------------------------------------------- */

.mk-foot {
  max-width: var(--mk-measure);
  margin: 72px auto 0;
  padding: 28px 24px 56px;
  border-top: 1px solid var(--mk-gold-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.mk-foot-brand {
  font-family: var(--mk-display);
  font-style: italic;
  font-size: 19px;
  color: var(--mk-ink);
}

.mk-foot-nav {
  font-family: var(--mk-label);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mk-foot-nav a {
  color: var(--mk-brown);
  text-decoration: none;
}

.mk-foot-nav a:hover {
  border-bottom: 1px solid var(--mk-gold);
}

.mk-foot-vol {
  width: 100%;
  font-family: var(--mk-label);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mk-gold);
}

/* ---- phone --------------------------------------------------- */

@media (max-width: 640px) {
  .mk-mast {
    padding: 18px 20px 14px;
  }
  .mk-mast-name {
    font-size: 22px;
  }
  .mk-mast-nav {
    gap: 14px;
    font-size: 10.5px;
  }
  .mk-foot {
    padding: 24px 20px 44px;
  }
}