/* Shared styles for every page of the portfolio */
:root {
  --plum: #6d224b;
  --pink: #a8457b;
  --pink-soft: rgba(168, 69, 123, 0.1);
  --ink: #303030;
  --ink-2: #444;
  --paper: #f7f7f7;
  --white: #fff;
  --muted: #888;

  --font-body: "Fira Sans", system-ui, sans-serif;
  --font-nav: "Archivo", system-ui, sans-serif;

  --page-max: 1720px;
  --gutter: clamp(16px, 5.2vw, 100px);
  --sidenav-w: 180px;
  --content-max: 1080px; /* width of the case-study column; images scale to this */
}

*, *::before, *::after { box-sizing: border-box; }
/* Side-nav jumps land below the sticky top nav instead of under it */
html { scroll-padding-top: 72px; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
/* Keep space for the scrollbar so short pages don't shift sideways */
html { scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* ---------- Top nav (Figma: Top Nav 1111:3018) ---------- */
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 17px 40px;
  background: var(--white);
  border-bottom: 1px solid #e6e6e6;
  font-family: var(--font-nav);
  font-size: 13px;
  line-height: 1.42;
}
.topnav__home { text-decoration: none; font-weight: 600; }
/* Wordmark (Figma: project page nav 1303:3882): "saachi shah", Archivo Bold; links home */
.topnav__brand { flex: none; text-decoration: none; color: #000; font-weight: 700; font-size: 20.5px; line-height: 1.42; letter-spacing: -0.78px; white-space: nowrap; }
.topnav__links { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.topnav__links a { text-decoration: none; color: #000; }
/* Hover: underline under the label */
.topnav__links a { position: relative; display: inline-block; }
.topnav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; background: #000;
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.topnav__links a:hover::after, .topnav__links a:focus-visible::after { transform: scaleX(1); }
/* Reserve the bold-italic width so the current-page style never shifts its neighbours */
.topnav__links a[data-label]::before { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; font-style: italic; pointer-events: none; }
.topnav__resume { display: inline-flex; align-items: center; gap: 3px; }
.topnav__resume svg { width: 17px; height: 17px; margin: -3px 0; flex: none; }

@media (max-width: 640px) {
  .topnav { padding: 14px 16px; }
  .topnav__links { gap: 16px; }
  .topnav__home { display: none; }
  .topnav { flex-wrap: wrap; row-gap: 6px; }
  .topnav__links { font-size: 13px; gap: 13px; }
  .topnav__links li { flex: none; white-space: nowrap; }
  .topnav__brand { font-size: 17px; letter-spacing: -0.5px; }
}

/* ---------- Case-study layout: sticky side nav + content ---------- */
/* Three columns: side nav | content | empty column the same width as the nav,
   so the content column sits in the true centre of the page. */
.study {
  display: grid;
  grid-template-columns: var(--sidenav-w) minmax(0, var(--content-max)) var(--sidenav-w);
  justify-content: center;
  column-gap: clamp(24px, 3vw, 48px);
  padding: 0 var(--gutter);
}
.study > main { min-width: 0; }
.sidenav {
  position: sticky;
  top: 120px;
  align-self: start;
  padding-top: 70px;
  font-family: var(--font-nav);
}
.sidenav__back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 37px;
  font-size: 16px; text-decoration: none; color: var(--muted);
}
.sidenav__back:hover { color: #000; }
.sidenav ol { list-style: none; margin: 0; padding: 0; }
.sidenav a.sidenav__label {
  display: block;
  padding: 6px 0 6px 12px;
  border-left: 1.5px solid #c9c9c9;
  font-size: 12px;
  line-height: 1.35;
  color: #8a8a8a;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, font-weight .15s ease;
}
.sidenav a.sidenav__label:hover { color: #000; }
/* Active state = Framer sidenav_label "Variant 3": bold, black text and line */
.sidenav a.sidenav__label.is-active { color: #000; font-weight: 700; border-left-color: #000; }

@media (max-width: 1024px) {
  .study { grid-template-columns: minmax(0, var(--content-max)); padding: 0 var(--gutter); }
  .sidenav { display: none; }
}

/* Current page in the top nav (Framer: bold italic) */
.topnav__links a[aria-current="page"] { font-weight: 600; font-style: italic; }

.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; }

@media (max-width: 359px) { .topnav__links { gap: 8px; font-size: 12px; } }