/* ============================================================================
   Diganta Chaudhury — personal site
   Dark, typographic, one page. Manrope for text, Instrument Serif for emphasis,
   DM Mono for labels. Layout is a single centred shell with hairline rules
   between sections.
   ========================================================================= */

:root {
  --black: #080808;
  --white: #f2f1ed;
  --soft: #a5a5a1;
  --dim: #c3c2be;
  --mute: #70706e;
  --line: #30302f;
  --edge: #4d4d4b;
  --card: #121212;

  --sans: Manrope, ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --nav-h: 82px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Anchors land below the sticky nav rather than under it. */
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

em {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
}

::selection {
  background: var(--white);
  color: var(--black);
}

:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell {
  max-width: 1440px;
  margin: auto;
  padding: 0 3.2vw;
}

.monospace,
.section-label,
.hero-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

/* ── Skip link ───────────────────────────────────────────────────────────── */

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--white);
  color: var(--black);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 3px;
  transform: translateY(-160%);
  transition: transform 0.18s var(--ease);
}

.skip-link:focus-visible {
  transform: none;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: color-mix(in srgb, var(--black) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Fallback for browsers without color-mix: a solid bar is better than none. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .nav {
    background: rgba(8, 8, 8, 0.88);
  }
}

.name {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The ensō is a photograph on a black ground, not a transparent glyph, so it
   is presented as a small tile. Over the hero photograph that reads as a
   deliberate badge rather than a ragged cut-out. */
.mark {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  flex: none;
}

.nav-links {
  display: flex;
  gap: 27px;
  color: var(--soft);
}

.nav-links a {
  position: relative;
  padding: 4px 0;
  transition: color 0.2s var(--ease);
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}

.nav-links a:hover,
.nav-links a[aria-current='true'] {
  color: var(--white);
}

.nav-links a:hover::after,
.nav-links a[aria-current='true']::after {
  transform: scaleX(1);
}

.nav-tag {
  color: var(--soft);
  white-space: nowrap;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--nav-h));
  padding: 10vh 0 4vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ── Hero photograph ─────────────────────────────────────────────────────
   Full-bleed: the hero lives inside the padded shell, so the media layer
   breaks out to the full viewport width and extends up behind the sticky
   nav, which then frosts it. The picture is darkened twice — once on the
   image itself, once with the scrim above it — so the off-white type keeps
   a wide contrast margin no matter which part of the frame lands behind it.
   ---------------------------------------------------------------------- */

.hero-media {
  position: absolute;
  top: calc(-1 * var(--nav-h));
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  overflow: hidden;
  /* 20px placeholder, inlined: the frame is never empty while the photo loads. */
  background:
    url('data:image/webp;base64,UklGRloAAABXRUJQVlA4IE4AAAAwAwCdASoUABsAPpFAmkqlo6IhMAgAsBIJZwDE7f4APh3vqfKGWQ8FA8vsAAD+9Ntjjnf1DyUf/z8mv+jrEf9mtRP/9pMSf/QFH/x+wA==')
      center / cover no-repeat,
    var(--black);
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keeps the raised arms and the truss in frame when a wide viewport crops
     this portrait photograph to a letterbox. */
  object-position: 50% 42%;
  /* Room for the parallax to travel without exposing an edge. */
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.16);
  filter: brightness(0.68) contrast(1.03) saturate(1.05);
}

.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.68) 0%,
      rgba(8, 8, 8, 0.42) 24%,
      rgba(8, 8, 8, 0.46) 52%,
      rgba(8, 8, 8, 0.82) 86%,
      var(--black) 100%
    ),
    radial-gradient(130% 90% at 50% 38%, rgba(8, 8, 8, 0) 0%, rgba(8, 8, 8, 0.5) 100%);
}

.hero-label,
.section-label {
  color: var(--soft);
}

h1 {
  max-width: 1180px;
  margin: 18px 0 50px;
  font-size: clamp(3.7rem, 9.8vw, 10rem);
  font-weight: 600;
  line-height: 0.85;
  letter-spacing: -0.09em;
}

h1 em {
  letter-spacing: -0.06em;
}

.hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.hero-intro {
  max-width: 470px;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--dim);
  letter-spacing: -0.02em;
}

.hero-index {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--soft);
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}

.hero-index:hover {
  color: var(--white);
}

.hero-index .cue {
  display: inline-block;
  animation: cue-bob 2.1s var(--ease) infinite;
}

@keyframes cue-bob {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(5px);
    opacity: 1;
  }
}

/* The photograph sits behind the hero type, so give the type its own small
   safety margin on top of the scrim. */
.hero h1,
.hero-label,
.hero-intro,
.hero-index {
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.45);
}

/* ── Sections ────────────────────────────────────────────────────────────── */

section {
  padding: 126px 0;
  border-top: 1px solid var(--line);
}

.hero {
  border-top: 0;
}

.section-heading {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 30px;
  margin-bottom: 64px;
}

h2 {
  margin: 0;
  font-size: clamp(2.3rem, 4.6vw, 4.9rem);
  line-height: 0.95;
  letter-spacing: -0.075em;
  font-weight: 600;
}

/* ── 01 Research ─────────────────────────────────────────────────────────── */

.research-grid {
  display: grid;
  grid-template-columns: 1.23fr 0.77fr;
  gap: 12px;
}

.research-copy {
  min-height: 460px;
  padding: 34px;
  background: var(--white);
  color: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.research-copy p {
  max-width: 700px;
  margin: 0;
  font-size: clamp(1.7rem, 3.05vw, 3.15rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.07em;
}

.research-copy .small {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.axis-card {
  min-height: 460px;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.axis-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--soft);
}

.axis {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 26px 0;
}

.axis span {
  display: inline-grid;
  place-items: center;
  width: 94px;
  height: 94px;
  border: 1px solid #777;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}

/* Connector between the nodes: a drawn line with a chevron, rather than a
   glyph, so it keeps its weight at any size. */
.axis i {
  position: relative;
  display: block;
  width: 26px;
  height: 1px;
  background: var(--edge);
  flex: none;
}

.axis i::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--edge);
  border-right: 1px solid var(--edge);
  transform: translateY(-50%) rotate(45deg);
}

.axis-note {
  font-size: 13px;
  line-height: 1.65;
  color: #bab9b5;
  margin: 0;
}

.keyword-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 26px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--soft);
}

/* ── 02 Background ───────────────────────────────────────────────────────── */

.background {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 9vw;
}

.statement {
  margin: 0;
  font-size: clamp(1.8rem, 3.35vw, 3.45rem);
  line-height: 1.13;
  letter-spacing: -0.07em;
}

.statement span {
  color: var(--mute);
}

.timeline {
  border-top: 1px solid #51514f;
}

.timeline-item {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 20px;
  padding: 19px 0;
  border-bottom: 1px solid var(--line);
}

.timeline-year {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--soft);
  padding-top: 4px;
}

.timeline-item h3 {
  margin: 0 0 4px;
  font-size: 16px;
  letter-spacing: -0.035em;
  font-weight: 600;
}

.timeline-item p {
  margin: 0;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.5;
}

/* ── 03 Building ─────────────────────────────────────────────────────────── */

.project-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.project {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 330px;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  transition:
    border-color 0.25s var(--ease),
    background 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.project:hover {
  background: #171716;
  border-color: var(--edge);
  transform: translateY(-3px);
}

.project-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--soft);
}

.project-name {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.07em;
}

.project-copy {
  margin: 0;
  max-width: 460px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--dim);
  letter-spacing: -0.01em;
}

.project-go {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--soft);
  transition: color 0.25s var(--ease);
}

.project:hover .project-go {
  color: var(--white);
}

/* ── 04 Outside the lab ──────────────────────────────────────────────────── */

.interests {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 30px;
  align-items: start;
}

.interest-copy {
  margin: 0;
  max-width: 750px;
  font-size: clamp(1.75rem, 3.2vw, 3.3rem);
  line-height: 1.14;
  letter-spacing: -0.07em;
}

.interest-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 30px;
}

.interest-list span {
  border: 1px solid var(--edge);
  padding: 11px 14px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ── 05 Find me ──────────────────────────────────────────────────────────── */

.links {
  padding: 11vh 0 8vh;
}

.links h2 {
  font-size: clamp(3.15rem, 8vw, 8.4rem);
  max-width: 1200px;
}

.contact-row {
  margin-top: 48px;
}

.contact-primary {
  display: inline-block;
  font-size: clamp(1.1rem, 2.1vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  color: var(--white);
  border-bottom: 1px solid var(--edge);
  padding-bottom: 4px;
  transition: border-color 0.2s var(--ease);
  word-break: break-word;
}

.contact-primary:hover {
  border-color: var(--white);
}

.link-row {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.link-row a {
  border: 1px solid #686866;
  border-radius: 100px;
  padding: 14px 19px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: 0.2s var(--ease);
}

.link-row a:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

/* Pill links still waiting on a real URL stay hidden until one is pasted in;
   see app.js. Project cards are handled differently — they keep their copy and
   simply stop being clickable, so the section never loses content. */
.link-row [data-needs-url] {
  display: none;
}

.project.is-inert {
  cursor: default;
}

.project.is-inert:hover {
  background: var(--card);
  border-color: var(--line);
  transform: none;
}

.project.is-inert .project-go {
  color: var(--mute);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--line);
  padding: 23px 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--soft);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

footer a:hover {
  color: var(--white);
}

/* ── Reveal on scroll ────────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* No JS: nothing should ever stay invisible. */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* ── Motion preferences ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .project:hover {
    transform: none;
  }
}

/* ── Small screens ───────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .research-grid,
  .project-grid {
    grid-template-columns: 1fr;
  }

  .background,
  .interests {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 720px) {
  :root {
    --nav-h: 67px;
  }

  .shell {
    padding: 0 20px;
  }

  .nav {
    gap: 14px;
  }

  .nav-tag {
    display: none;
  }

  /* The full name would eat most of a 375px bar, so the mark carries the
     wordmark alone and the section links get the room they need. */
  .name-full {
    display: none;
  }

  .mark {
    width: 30px;
    height: 30px;
  }

  /* The nav stays — it is the only way around a one-page site on a phone.
     It scrolls sideways instead of disappearing, and fades at the right edge
     so it is visible that there is more to reach. */
  .nav-links {
    gap: 18px;
    font-size: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

  .hero {
    min-height: calc(100svh - var(--nav-h));
    padding: 8vh 0 3vh;
  }

  h1 {
    font-size: clamp(3.55rem, 16.2vw, 7rem);
    margin-bottom: 45px;
  }

  .hero-intro {
    font-size: 13px;
    max-width: 300px;
  }

  .hero-index {
    display: none;
  }

  section {
    padding: 82px 0;
  }

  .section-heading {
    display: block;
    margin-bottom: 40px;
  }

  .section-label {
    display: block;
    margin-bottom: 20px;
  }

  .research-copy,
  .axis-card {
    min-height: 360px;
    padding: 24px;
  }

  .axis span {
    width: 75px;
    height: 75px;
    font-size: 10px;
  }

  .axis i {
    width: 16px;
  }

  .project {
    min-height: 0;
    padding: 24px;
  }

  .timeline-item {
    grid-template-columns: 90px 1fr;
  }

  .links {
    padding: 95px 0 63px;
  }

  footer {
    flex-wrap: wrap;
  }
}

/* ── Print ───────────────────────────────────────────────────────────────── */

@media print {
  .nav,
  .hero-index,
  .skip-link,
  footer a {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }

  .research-copy,
  .axis-card,
  .project {
    background: #fff;
    color: #000;
    border: 1px solid #ccc;
    min-height: 0;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  section {
    padding: 24px 0;
    break-inside: avoid;
  }
}