/* ==========================================================================
   Noibedya Narayan Ray — Portfolio
   Base styles shared across every page.
   Design reference: Figma "Portfolio Design" file, 1920px desktop frames.
   ========================================================================== */

:root {
  --ink: #000000;
  --ink-muted: #888888;
  --paper: #ffffff;
  --edge: #e5e5e5;

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap-max: 1920px;
  /* Figma frames put the content column at x 106 -> 1822 inside 1920,
     so 102px of side padding reproduces the 1716px column, centred. */
  --wrap-pad: clamp(20px, 5.3vw, 102px);

  --nav-gap: clamp(18px, 2.6vw, 50px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* height:auto matters wherever an img carries width/height attributes:
   without it the attribute height wins and the picture stretches. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding-left: var(--wrap-pad);
  padding-right: var(--wrap-pad);
}

/* ---------- Header / nav ---------- */

.site-header {
  padding-top: clamp(24px, 3.5vw, 68px);
  padding-bottom: clamp(16px, 2vw, 24px);
}

.header-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 78px;
  flex: none;
}

.brand-mark {
  width: 78px;
  height: 78px;
  border-radius: 50%;
}

.brand-word {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  padding-top: 24px;
}

.nav-link {
  font-size: clamp(15px, 1.25vw, 24px);
  color: var(--ink-muted);
  transition: color 0.15s ease;
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--ink);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex: none;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

@media (max-width: 720px) {
  .main-nav {
    position: fixed;
    inset: 0;
    top: 0;
    background: var(--paper);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    padding-top: 0;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 40;
  }

  .main-nav.is-open { transform: translateX(0); }

  .main-nav .nav-link { font-size: 22px; }

  .nav-toggle { display: flex; z-index: 50; }
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--edge);
  margin-top: clamp(48px, 8vw, 120px);
  padding: clamp(24px, 4vw, 40px) 0 clamp(32px, 6vw, 64px);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: var(--ink-muted);
}

.footer-inner a { color: var(--ink); }