/*
  Mahendra Pratap Singh — founder site
  Hand-written, dependency-free CSS. No build step.
  Editorial-dossier direction: warm cream / near-black / amber accent,
  Syne display + Inter body + JetBrains Mono for structural/index accents.
*/

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }

/* ---------- Tokens ---------- */
:root {
  --amber: #FFB646;
  --cream: #FFE9D9;
  --ink: #080808;
  --eyebrow: #8F4C00;
  --white: #FFFFFF;
  --paper: #FFF8F1;

  --font-display: "Syne", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --container: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 72px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  background: var(--ink);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 6px;
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: 16px;
}

/* ---------- Focus states ---------- */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Decorative helpers ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(13px, 1.4vw, 16px);
  color: var(--eyebrow);
}
.eyebrow::before {
  content: "";
  width: 32px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}
.eyebrow__num {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.section-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.1;
  margin-top: 12px;
}

.section-lede {
  max-width: 60ch;
  color: rgba(8, 8, 8, 0.65);
  font-size: clamp(16px, 1.6vw, 19px);
}

.section {
  padding-block: clamp(64px, 10vw, 120px);
}
.section--dark {
  background: var(--ink);
  color: var(--white);
}
.section--dark .section-lede { color: rgba(255, 255, 255, 0.7); }
.section--dark .eyebrow { color: var(--amber); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  padding: 16px 28px;
  border-radius: 999px;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.btn svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.btn:hover svg { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn svg { transition: none; }
}

.btn--primary {
  background: var(--ink);
  color: var(--white);
}
.btn--primary:hover { background: var(--amber); color: var(--ink); }

.section--dark .btn--primary {
  background: var(--amber);
  color: var(--ink);
}
.section--dark .btn--primary:hover { background: var(--white); color: var(--ink); }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid rgba(8, 8, 8, 0.5);
}
.btn--outline:hover { border-color: var(--ink); }

.section--dark .btn--outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
}
.section--dark .btn--outline:hover { border-color: var(--white); }

/* ---------- Header / nav ---------- */
/* Sticky header with a collapsing bottom margin: it stays reachable at
   all times (no JS dependency) but doesn't reserve layout space, so the
   hero visually begins at the very top edge behind it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  margin-bottom: calc(-1 * var(--header-h));
  background: rgba(255, 248, 241, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(8, 8, 8, 0.08);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 18px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
}
.wordmark__mark {
  width: 10px;
  height: 10px;
  border: 2px solid var(--amber);
  border-radius: 50%;
  display: inline-block;
}
.wordmark span { color: var(--amber); }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}
.site-nav__list {
  display: flex;
  gap: clamp(16px, 2.4vw, 32px);
}
.site-nav__list a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  padding: 6px 2px;
  position: relative;
}
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--amber);
  transition: width 0.25s var(--ease);
}
.site-nav__list a:hover::after,
.site-nav__list a:focus-visible::after { width: 100%; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 14px;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/*
  Mobile drawer is a top-level sibling of .site-header, not a descendant.
  .site-header has backdrop-filter, which establishes a containing block for
  any fixed/absolute descendant — keeping the drawer outside it means
  position: fixed below resolves against the real viewport.

  z-index stays below .site-header's (50) on purpose: the header (with the
  toggle button) must stay visible and clickable above the open drawer so the
  toggle can close it again. The drawer only needs to sit above normal page
  content, which has no explicit z-index.
*/
.mobile-drawer { display: none; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; }

  .mobile-drawer {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 30%;
    z-index: 40;
    overflow-y: auto;
    background: var(--ink);
    transform: translateX(100%);
    transition: transform 0.35s var(--ease);
  }
  .mobile-drawer[data-open="true"] { transform: translateX(0); }
  .mobile-drawer__list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 28px;
    min-height: 100%;
    padding: 32px clamp(24px, 8vw, 56px);
  }
  .mobile-drawer__list a {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--white);
    font-size: 22px;
    padding: 6px 2px;
    position: relative;
  }
  @media (prefers-reduced-motion: reduce) {
    .mobile-drawer { transition: none; }
  }
}

/* ---------- Hero ---------- */
.hero {
  background: var(--cream);
  position: relative;
  padding-top: calc(var(--header-h) + clamp(24px, 6vw, 48px));
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: end;
}
.hero__portrait {
  order: -1;
  position: relative;
  max-width: 320px;
  margin-inline: auto;
}
.hero__portrait img {
  width: 100%;
  height: auto;
  display: block;
}
.hero__content {
  padding-bottom: clamp(40px, 8vw, 64px);
}
.hero__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 15vw, 80px);
  line-height: 0.92;
  margin-top: 16px;
}
.hero__name span { display: block; }
.hero__tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 22px);
  color: rgba(8, 8, 8, 0.8);
  margin-top: 20px;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}
.hero__meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 44px;
}
.hero__meta-figure {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
}
.hero__meta-label {
  font-size: 15px;
  color: rgba(8, 8, 8, 0.65);
  max-width: 14ch;
}

@media (min-width: 700px) {
  .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 32px;
  }
  .hero__portrait { order: 0; max-width: none; margin-inline: 0; }
  .hero__content { padding-bottom: 56px; }
}

@media (min-width: 992px) {
  .hero {
    padding-top: calc(var(--header-h) + clamp(40px, 6vw, 72px));
    min-height: 88vh;
    display: flex;
    align-items: center;
  }
  .hero__content {
    max-width: 640px;
    padding-bottom: clamp(32px, 5vw, 56px);
  }
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(24px, 4vw, 64px);
    width: 100%;
  }
  .hero__portrait { max-width: none; }
  .hero__name { font-size: clamp(80px, 8vw, 128px); line-height: 0.9; }
}

/* ---------- About / capabilities ---------- */
.about__roles {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: rgba(8, 8, 8, 0.75);
  margin-top: 16px;
}

.capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.capabilities li {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  border: 1px solid rgba(8, 8, 8, 0.15);
  border-radius: 999px;
}

.about__grid {
  display: grid;
  gap: 56px;
  margin-top: 56px;
}
@media (min-width: 860px) {
  .about__grid { grid-template-columns: 1fr 1fr; }
}
.education__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.education__item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(8, 8, 8, 0.1);
}
.education__degree {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
}
.education__school {
  font-size: 15px;
  color: rgba(8, 8, 8, 0.6);
  margin-top: 4px;
}
.education__year {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--amber);
  white-space: nowrap;
}

/* ---------- Editorial portrait break ---------- */
.editorial {
  padding-block: 0;
}
.editorial__frame {
  margin: 0;
  position: relative;
  height: min(70vh, 620px);
  overflow: hidden;
}
.editorial__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: grayscale(1) contrast(1.08) brightness(0.97);
}
.editorial__caption {
  position: absolute;
  left: var(--gutter);
  bottom: 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--white);
  background: rgba(8, 8, 8, 0.55);
  padding: 6px 12px;
  border-radius: 999px;
}
@media (min-width: 700px) {
  .editorial__frame { height: min(86vh, 900px); }
}

/* ---------- Selected work ---------- */
.work__grid {
  display: grid;
  gap: 24px;
  margin-top: 48px;
}
@media (min-width: 700px) {
  .work__grid { grid-template-columns: 1fr 1fr; }
}
.work-card {
  border: 1px solid rgba(8, 8, 8, 0.12);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.work-card:hover { border-color: var(--amber); }
@media (prefers-reduced-motion: reduce) {
  .work-card { transition: none; }
}
.work-card__role {
  font-size: 14px;
  color: rgba(8, 8, 8, 0.55);
}
.work-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
}
.work-card__meta {
  font-size: 14px;
  color: var(--amber);
  font-weight: 600;
}

/* ---------- Journey ---------- */
.journey__list {
  margin-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.journey__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding-block: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 700px) {
  .journey__item { grid-template-columns: 200px 1fr; align-items: baseline; gap: 24px; }
}
.journey__date {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--amber);
  font-size: 14px;
}
.journey__role {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
}
.journey__org {
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
  margin-top: 2px;
}

/* ---------- Writing / publications ---------- */
.publications {
  margin-top: 40px;
  border-top: 1px solid rgba(8, 8, 8, 0.1);
  max-width: 880px;
}
.publication {
  border-bottom: 1px solid rgba(8, 8, 8, 0.1);
}
.publication a {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding-block: 24px;
}
.publication__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
}
.publication a:hover .publication__name,
.publication a:focus-visible .publication__name {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.publication__desc {
  font-size: 15px;
  color: rgba(8, 8, 8, 0.65);
  max-width: 46ch;
}
.publication__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--eyebrow);
}
.publication__link svg { width: 14px; height: 14px; }

@media (min-width: 700px) {
  .publication a {
    grid-template-columns: 200px 1fr auto;
    align-items: center;
    gap: 24px;
  }
}

/* ---------- Contact ---------- */
.contact {
  text-align: left;
}
.contact .container { position: relative; }
.contact__statement {
  font-size: clamp(40px, 8vw, 88px);
  max-width: 16ch;
}
.contact__lede {
  font-size: clamp(18px, 2.2vw, 24px);
  color: rgba(255, 255, 255, 0.75);
  margin-top: 16px;
}
.contact__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 40px;
}
.contact__location {
  font-family: var(--font-mono);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--white);
  padding-top: clamp(48px, 8vw, 80px);
}
.footer-index {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-bottom: clamp(32px, 6vw, 56px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-index a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  position: relative;
  padding: 4px 2px;
}
.footer-index a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--amber);
  transition: width 0.25s var(--ease);
}
.footer-index a:hover::after,
.footer-index a:focus-visible::after { width: 100%; }
.footer-index .eyebrow__num { color: var(--amber); }

.footer-elsewhere {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding-block: clamp(20px, 4vw, 28px);
  font-size: 14px;
}
.footer-elsewhere__label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}
.footer-elsewhere a { color: rgba(255, 255, 255, 0.7); }
.footer-elsewhere a:hover,
.footer-elsewhere a:focus-visible { color: var(--amber); }

/*
  Sizing is calibrated to the rendered width of this exact string in
  Syne 800 with 0.06em letter-spacing, measured directly (not guessed):
  "MAHENDRA SINGH" renders at 16.7x its font-size; "MAHENDRA" alone
  (the wider of the two words) at 10.63x. Font-size is solved from the
  real available container width (container max-width minus its
  padding, i.e. --gutter) with a 10% safety margin, so it can never
  exceed the box it sits in at any viewport. Below 700px there isn't
  enough width for one line at a legible size, so it wraps to two
  lines (MAHENDRA / SINGH) instead of shrinking illegibly.
*/
.footer-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--cream);
  font-size: clamp(24px, calc((100vw - 2 * var(--gutter)) * 0.9 / 10.63), 64px);
  line-height: 1;
  text-align: center;
  padding-block: 32px;
  white-space: nowrap;
  overflow: hidden;
}
.footer-wordmark__break { display: block; }

@media (min-width: 700px) {
  .footer-wordmark {
    font-size: clamp(24px, calc((min(100vw, 1200px) - 2 * var(--gutter)) * 0.9 / 16.7), 64px);
  }
  .footer-wordmark__break { display: none; }
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 24px;
}
.footer-bottom p { font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.footer-email {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}
.footer-email:hover { color: var(--amber); }
.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.back-to-top svg { width: 18px; height: 18px; }

/* ---------- Screen-reader only ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}