/* ===============================================================
   Kartikeya Bansal - Portfolio
   Editorial minimal. Display serif + grotesque sans + mono meta.
   =============================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --paper:   #ffffff;          /* white main background */
  --paper-2: #f4f5f7;
  --ribbon:  #e9ebef;          /* grey top ribbon */
  --ink:     #16223f;          /* navy */
  --muted:   #5a6377;
  --faint:   #9aa2b2;
  --line:    #e2e5ea;
  --accent:  #2f4d86;          /* steel navy - used sparingly */
  --ph:      #eceef2;          /* grey image placeholders / cards */

  --maxw: 1280px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* selection */
::selection { background: var(--ink); color: var(--paper); }

h1,h2,h3,h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  line-height: 1.04;
  margin: 0;
  letter-spacing: -0.018em;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
p { margin: 0 0 1.1em; max-width: 60ch; }
.muted { color: var(--muted); }

/* mono meta type */
.mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* 12-col grid helper */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
}

/* ---------- Top utility bar ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem var(--gutter);
  background: var(--ribbon);
  border-bottom: 1px solid var(--line);
}
.topbar .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); display: inline-block; margin-right: 0.5rem;
  vertical-align: middle;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1rem; padding-bottom: 1rem;
}
.nav__brand {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: 1.1rem; letter-spacing: -0.01em;
}
.nav__brand em { font-style: italic; color: var(--accent); font-weight: 500; }
.nav__links { display: flex; gap: clamp(1.1rem, 3vw, 2.6rem); align-items: baseline; }
.nav__links a {
  position: relative;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding: 0.2rem 0;
  transition: color 0.3s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px;
  width: 0; background: var(--ink); transition: width 0.35s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { width: 100%; }

/* ---------- Hero ---------- */
.hero {
  min-height: clamp(500px, calc(100svh - 110px), 820px);
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: clamp(2.5rem, 10vw, 7rem);
  padding-top: clamp(2.5rem, 7vw, 5.5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 2.5rem 4rem;
  padding-bottom: clamp(2rem, 6vw, 4rem);
}
.hero__meta div span { display: block; }
.hero__meta .k { color: var(--faint); margin-bottom: 0.4rem; }
.hero__meta .v { font-size: 0.95rem; color: var(--ink); letter-spacing: 0; }

.hero__name {
  font-size: clamp(3.4rem, 15.5vw, 14rem);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.04em;
  margin: 0;
}
.hero__name em {
  font-style: italic; font-weight: 400; color: var(--accent);
}
.hero__bottom {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
  align-items: end; margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.hero__intro {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 300; line-height: 1.4; max-width: 34ch;
  margin: 0; color: var(--ink);
}
.hero__scroll { justify-self: start; }

@media (min-width: 880px) {
  .hero__bottom {
    grid-template-columns: 1fr auto;
  }
}

/* ---------- Home hero visual ---------- */
.hero-visual {
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

/* ---------- Section scaffolding ---------- */
.section { padding-top: clamp(4rem, 9vw, 8rem); padding-bottom: clamp(4rem, 9vw, 8rem); }
.section__head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--line); padding-bottom: 1.1rem; margin-bottom: 2.5rem;
  gap: 1rem; flex-wrap: wrap;
}
.section__head h2 { font-size: clamp(1.4rem, 3vw, 2rem); }

/* ---------- Work index rows (home) ---------- */
.index-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(1rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.8rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--line);
  position: relative;
  transition: padding-left 0.45s var(--ease);
}
.index-row:last-of-type { border-bottom: 1px solid var(--line); }
.index-row__num { font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; color: var(--faint); align-self: start; padding-top: 0.5rem; }
.index-row__title {
  font-size: clamp(2.1rem, 7vw, 5rem); font-weight: 500; line-height: 0.95;
  letter-spacing: -0.03em; transition: color 0.35s var(--ease);
}
.index-row__title em { font-style: italic; font-weight: 400; }
.index-row__desc { color: var(--muted); font-size: 0.95rem; max-width: 34ch; margin: 0.9rem 0 0; }
.index-row__arrow {
  font-family: 'Fraunces', serif; font-size: clamp(1.5rem, 4vw, 2.6rem);
  color: var(--ink); transition: transform 0.45s var(--ease), color 0.35s var(--ease);
  align-self: center;
}
/* thumbnail that appears on hover (desktop) */
.index-row__thumb {
  display: none;
  overflow: hidden;
}
.index-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) {
  .index-row { grid-template-columns: auto minmax(0, 1fr) min(22vw, 26rem) auto; }
  .index-row__thumb {
    display: block; aspect-ratio: 4/3; opacity: 1; transform: none;
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  }
  .index-row:hover { padding-left: clamp(0.5rem, 2vw, 1.5rem); }
  .index-row:hover .index-row__thumb { transform: scale(1.03); }
  .index-row:hover .index-row__title { color: var(--accent); }
  .index-row:hover .index-row__arrow { transform: translate(10px, -2px) rotate(-2deg); color: var(--accent); }
}

/* ---------- Designed image placeholders ---------- */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 11px, color-mix(in srgb, var(--faint) 18%, transparent) 11px, color-mix(in srgb, var(--faint) 18%, transparent) 12px),
    var(--ph);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 2rem 1.5rem;
  overflow: hidden;
}
.ph__label {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; line-height: 1.5;
  letter-spacing: 0.03em; max-width: 32ch; color: var(--muted);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  padding: 0.55rem 0.8rem;
}
.ph::before {
  content: attr(data-idx);
  position: absolute; top: 0.8rem; left: 0.9rem;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.1em;
  color: var(--faint);
}
/* corner ticks */
.ph::after {
  content: ""; position: absolute; inset: 0.7rem; pointer-events: none;
  background:
    linear-gradient(var(--faint),var(--faint)) left top,
    linear-gradient(var(--faint),var(--faint)) left top,
    linear-gradient(var(--faint),var(--faint)) right top,
    linear-gradient(var(--faint),var(--faint)) right top,
    linear-gradient(var(--faint),var(--faint)) left bottom,
    linear-gradient(var(--faint),var(--faint)) left bottom,
    linear-gradient(var(--faint),var(--faint)) right bottom,
    linear-gradient(var(--faint),var(--faint)) right bottom;
  background-repeat: no-repeat;
  background-size: 14px 1px, 1px 14px;
  opacity: 0.6;
}

.ph--wide   { aspect-ratio: 16/9; }
.ph--full   { aspect-ratio: 3/2; }
.ph--square { aspect-ratio: 1/1; }
.ph--tall   { aspect-ratio: 3/4; }
.ph--hero   { aspect-ratio: 21/9; }

/* real images drop into the same aspect-ratio containers */
.shot {
  position: relative;
  display: block;
  width: 100%;
  background: var(--ph);
  overflow: hidden;
}
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.shot.contain img { object-fit: contain; padding: 6%; }   /* sketches / diagrams - no crop */

/* natural-ratio figure - preserves the image's aspect ratio exactly (no crop) */
.fig { margin: 0; }
.fig img { width: 100%; height: auto; display: block; background: var(--ph); }
.fig--center { max-width: 820px; margin-left: auto; margin-right: auto; }
.fig--diagram { max-width: 760px; margin-left: auto; margin-right: auto; }
.fig--narrow { max-width: 420px; }

/* Inside a step's text column, figures sit flush with the text (no centering / cap)
   so image and caption left-edges line up with the prose on wide screens. */
.sub .fig--center,
.sub .fig--diagram { max-width: 100%; margin-left: 0; margin-right: 0; }

/* line-art, CAD renders & diagrams → blend into the page (no border, no card) */
.shot.art { background: transparent; }
.shot.art img { object-fit: contain; padding: 8%; }
.fig.art img { background: transparent; padding: 5%; }
.shot--wide   { aspect-ratio: 16/9; }
.shot--full   { aspect-ratio: 3/2; }
.shot--square { aspect-ratio: 1/1; }
.shot--tall   { aspect-ratio: 3/4; }
.shot--hero   { aspect-ratio: 21/9; }

figure { margin: 0; }
figcaption { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--muted); margin-top: 0.7rem; text-transform: uppercase; }

/* Stacked figures: keep each caption bound to the image above it, not the
   one below. Without this the caption sits 0.7rem under its own image but
   flush against the next figure. Reset inside grids, where gap handles it. */
.fig + .fig { margin-top: clamp(1.6rem, 3vw, 2.2rem); }
.media-grid .fig + .fig,
.media-row .fig + .fig { margin-top: 0; }

/* Rounded corners on every figure / image across all pages */
.shot,
.ph,
.index-row__thumb { border-radius: 10px; }
.fig > img { border-radius: 10px; }

/* ---------- Inline feature link (e.g. SolidWorks IG post) ---------- */
.ig-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.4rem;
  padding: 0.6em 1.1em;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.ig-link:hover {
  background: var(--accent);
  transform: translateY(-1px);
}

/* ---------- Media grids ---------- */
.media-grid { display: grid; gap: clamp(0.9rem, 2vw, 1.5rem); margin-top: 1.5rem; }
.media-grid--2 { grid-template-columns: repeat(2, 1fr); }
.media-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Equal-height justified row - figures carry inline flex-grow set to their
   aspect ratio, so heights match and widths fill the row. flex-basis:0 makes
   grow the sole driver of width; min-width:0 lets narrow items shrink. */
.media-row { display: flex; gap: clamp(0.9rem, 2vw, 1.5rem); align-items: flex-start; margin-top: 1.5rem; }
.media-row > .fig { flex-basis: 0; min-width: 0; }
.stack > * + * { margin-top: clamp(0.9rem, 2vw, 1.5rem); }

/* ---------- Page head (subpages) ---------- */
.page-head { padding-top: clamp(4rem, 11vw, 9rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
.page-head h1 {
  font-size: clamp(2.6rem, 9vw, 7rem); line-height: 0.92; letter-spacing: -0.035em;
  max-width: 16ch; margin: 1.5rem 0 1.5rem;
}
.page-head h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.page-head p { font-size: 1.15rem; color: var(--muted); max-width: 48ch; }

/* ---------- Projects ---------- */
.project { padding-top: clamp(3.5rem, 8vw, 7rem); padding-bottom: clamp(3.5rem, 8vw, 7rem); border-top: 1px solid var(--ink); }
.project__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.project__index {
  display: flex; align-items: baseline; gap: 1rem;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 1.4rem;
}
.project__index .n { font-size: 0.95rem; color: var(--accent); }
.project__index .bar { flex: 1; height: 1px; background: var(--line); }
.project__title {
  font-size: clamp(2.2rem, 7vw, 5.2rem); line-height: 0.94; letter-spacing: -0.035em;
  margin-bottom: 1.2rem; max-width: 18ch;
}
.project__title em { font-style: italic; font-weight: 400; }
.project__lead {
  font-size: clamp(1.1rem, 1.8vw, 1.45rem); font-weight: 300; line-height: 1.42;
  max-width: 46ch; margin: 0;
}

/* subsections - sticky label column on desktop */
.sub { margin-top: clamp(2.5rem, 5vw, 4rem); }
.sub__inner { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.sub__label {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
.sub__label .step { color: var(--faint); margin-right: 0.6rem; }
.sub h3 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 0.7rem; }
@media (min-width: 900px) {
  .sub__inner { grid-template-columns: 200px 1fr; gap: clamp(2rem, 5vw, 4rem); }
  .sub__label { position: sticky; top: 90px; align-self: start; padding-top: 0.4rem; }
}

/* award blocks */
.awards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 1.5rem 0 0; }
@media (min-width: 700px) { .awards { grid-template-columns: 1fr 1fr; } }
.award { border-top: 1px solid var(--ink); padding-top: 1.1rem; }
.award h3 { font-size: 1.5rem; margin-bottom: 0.4rem; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--ink); padding: clamp(3.5rem, 8vw, 6rem) 0 2rem; margin-top: 2rem; }
.footer__big {
  font-size: clamp(2.6rem, 11vw, 9rem); line-height: 0.9; letter-spacing: -0.04em;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.footer__big em { font-style: italic; font-weight: 400; color: var(--accent); }
.footer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem 2rem; }
@media (min-width: 720px) { .footer__grid { grid-template-columns: repeat(4, 1fr); } }
.footer__item .k { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.5rem; }
.footer__item a, .footer__item span { font-size: 1.02rem; position: relative; }
.footer__item a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: var(--ink); transition: width 0.35s var(--ease); }
.footer__item a:hover::after { width: 100%; }
.footer__copy { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.2rem; border-top: 1px solid var(--line); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .nav__links a { font-size: 0.66rem; }
  .index-row { grid-template-columns: auto 1fr auto; }
  .topbar .hide-sm { display: none; }
}
@media (max-width: 600px) {
  .media-grid--2, .media-grid--3 { grid-template-columns: 1fr; }
  .media-row { flex-direction: column; }
  .media-row > .fig { flex: none; width: 100%; }
  .hero__meta { gap: 1.4rem 2.5rem; }
}