/* ============================================================
   Afraim Murshed | Portfolio
   ============================================================ */


:root {

  --bg: #0b0c0e;
  --bg-soft: #101216;
  --panel: #111318;

  --text: #f1eee8;
  --text-soft: #a8afbd;
  --text-muted: #747b89;

  --line: #292d35;
  --line-soft: #1d2026;

  --accent: #d5aa22;
  --accent-light: #efc83d;

  --max-width: 1180px;

  --nav-width: 270px;

}


/* ============================================================
   RESET
   ============================================================ */

* {
  box-sizing: border-box;
}


html {

  scroll-behavior: smooth;

  scroll-padding-top: 30px;

}


body {

  margin: 0;

  background: var(--bg);

  color: var(--text);

  font-family: "Inter", sans-serif;

  line-height: 1.7;

  overflow-x: hidden;

}


body.nav-open {
  overflow: hidden;
}


a {
  color: inherit;
}


button,
input,
textarea {
  font: inherit;
}


img {
  max-width: 100%;
  display: block;
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.skip-link {

  position: fixed;

  top: 15px;
  left: 15px;

  padding: 10px 15px;

  background: var(--accent);

  color: #080808;

  z-index: 3000;

  transform: translateY(-150%);

  transition: transform .2s ease;

}


.skip-link:focus {
  transform: translateY(0);
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.mono {

  font-family:
    "JetBrains Mono",
    monospace;

}


.eyebrow {

  margin: 0 0 25px;

  color: var(--accent);

  font-family:
    "JetBrains Mono",
    monospace;

  font-size: 13px;

  letter-spacing: .04em;

}


h1,
h2,
h3 {

  margin-top: 0;

  font-family:
    "Space Grotesk",
    sans-serif;

  line-height: 1.05;

}


h2 {

  margin-bottom: 60px;

  font-size:
    clamp(44px, 6vw, 66px);

  letter-spacing: -.045em;

}


h3 {

  margin-bottom: 17px;

  font-size:
    clamp(22px, 3vw, 28px);

  letter-spacing: -.025em;

}


p {
  margin-top: 0;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.site-nav {

  position: fixed;

  top: 0;
  left: 0;
  bottom: 0;

  width: var(--nav-width);

  padding:
    34px 30px 28px;

  background:
    rgba(11, 12, 14, .97);

  border-right:
    1px solid var(--line-soft);

  z-index: 1500;

  display: flex;

  flex-direction: column;

}


.nav-top {
  margin-bottom: 55px;
}


.logo {

  display: inline-block;

  color: var(--text);

  text-decoration: none;

  font-family:
    "JetBrains Mono",
    monospace;

  font-size: 17px;

  font-weight: 500;

}


.logo:hover {
  color: var(--accent);
}


.nav-links {

  display: flex;

  flex-direction: column;

  height: 100%;

}


.nav-links ul {

  list-style: none;

  margin: 0;
  padding: 0;

}


.nav-link {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 10px 0;

  color: var(--text-muted);

  text-decoration: none;

  font-family:
    "JetBrains Mono",
    monospace;

  font-size: 13px;

  transition:
    color .2s ease,
    transform .2s ease;

}


.nav-link span {

  width: 24px;

  color: #555b67;

  font-size: 11px;

}


.nav-link:hover {

  color: var(--text);

  transform: translateX(3px);

}


.nav-link.active {

  color: var(--text);

}


.nav-link.active span {

  color: var(--accent);

}


.nav-footer {
  margin-top: auto;
}


.status-pill {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding:
    8px 12px;

  border:
    1px solid var(--line);

  border-radius: 999px;

  color: var(--text-soft);

  font-family:
    "JetBrains Mono",
    monospace;

  font-size: 11px;

}


.status-dot {

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--accent);

  box-shadow:
    0 0 12px
    rgba(213, 170, 34, .35);

}


.nav-socials {

  display: flex;

  gap: 22px;

  margin-top: 25px;

}


.social-link {

  color: var(--text-soft);

  text-decoration: none;

  font-size: 14px;

  transition:
    color .2s ease,
    transform .2s ease;

}


.social-link:hover {

  color: var(--accent);

  transform: translateY(-2px);

}


.nav-toggle {

  display: none;

}


/* ============================================================
   MAIN
   ============================================================ */

main {

  margin-left: var(--nav-width);

}


/* ============================================================
   SECTIONS
   ============================================================ */

/*
   Important:
   Only the HERO fills the viewport.
   Other sections use equal vertical padding.
*/

.section {

  position: relative;

  padding:
    105px 70px;

}


.section-inner {

  width: 100%;

  max-width: var(--max-width);

  margin: 0;

}


/* ============================================================
   HERO
   ============================================================ */

.hero {

  min-height: 100vh;

  display: flex;

  align-items: center;

  overflow: hidden;

}


.hero-grid {

  position: absolute;

  inset: 0;

  opacity: .35;

  background-image:

    linear-gradient(
      rgba(255, 255, 255, .035) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255, 255, 255, .035) 1px,
      transparent 1px
    );

  background-size: 64px 64px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 90%
    );

  pointer-events: none;

}


.hero-content {

  position: relative;

  z-index: 2;

  max-width: 900px;

}


.hero-name {

  margin-bottom: 42px;

  font-size:
    clamp(72px, 12vw, 150px);

  line-height: .82;

  letter-spacing: -.075em;

}


.hero-headline {

  max-width: 850px;

  margin-bottom: 23px;

  color: var(--text);

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(22px, 3vw, 34px);

  line-height: 1.25;

}


.hero-intro {

  max-width: 720px;

  margin-bottom: 35px;

  color: var(--text-soft);

  font-size: 16px;

}


.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-bottom: 28px;

}


.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 50px;

  padding:
    12px 22px;

  border:
    1px solid transparent;

  border-radius: 2px;

  text-decoration: none;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-weight: 600;

  cursor: pointer;

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;

}


.btn:hover {

  transform: translateY(-2px);

}


.btn-primary {

  background: var(--accent);

  color: #080808;

}


.btn-primary:hover {

  background:
    var(--accent-light);

}


.btn-ghost {

  border-color: var(--line);

  background: transparent;

  color: var(--text);

}


.btn-ghost:hover {

  background: var(--panel);

}


.hero-status {

  color: var(--text-muted);

  font-size: 12px;

}


.hero-status span {

  color: var(--text-soft);

}


.hero-status b {

  color: var(--accent);

}


.scroll-cue {

  position: absolute;

  right: 65px;
  bottom: 40px;

  display: flex;

  align-items: center;

  gap: 10px;

  color: var(--text-muted);

  text-decoration: none;

  font-family:
    "JetBrains Mono",
    monospace;

  font-size: 11px;

  writing-mode: vertical-rl;

}


.scroll-cue span {

  width: 1px;
  height: 40px;

  background: var(--line);

}


/* ============================================================
   ABOUT
   ============================================================ */

.about-grid {

  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(280px, .8fr);

  gap: 85px;

}


.about-copy {

  color: var(--text-soft);

  font-size: 16px;

}


.about-copy p {

  margin-bottom: 24px;

}


.about-facts {

  border-top:
    1px solid var(--line);

}


.fact {

  display: flex;

  flex-direction: column;

  gap: 7px;

  padding:
    20px 0;

  border-bottom:
    1px solid var(--line);

}


.fact-label {

  color: var(--accent);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: .08em;

}


.fact-value {

  color: var(--text);

  font-size: 15px;

}


/* ============================================================
   TIMELINE
   ============================================================ */

.timeline {

  position: relative;

  list-style: none;

  margin: 0;

  padding:
    0 0 0 38px;

}


.timeline::before {

  content: "";

  position: absolute;

  top: 8px;

  bottom: 0;

  left: 8px;

  width: 1px;

  background: var(--line);

}


.timeline-item {

  position: relative;

  margin-bottom: 65px;

}


.timeline-item:last-child {

  margin-bottom: 0;

}


.timeline-marker {

  position: absolute;

  top: 8px;

  left: -38px;

  width: 17px;
  height: 17px;

  border:
    2px solid var(--accent);

  border-radius: 50%;

  background: var(--bg);

  box-shadow:
    0 0 0 5px var(--bg);

}


.timeline-body {

  max-width: 900px;

}


.timeline-date {

  margin-bottom: 11px;

  color: var(--accent);

  font-size: 12px;

}


.timeline-org {

  margin-bottom: 21px;

  color: #8f98aa;

  font-size: 16px;

}


.timeline-body >
p:not(.timeline-date):not(.timeline-org) {

  max-width: 850px;

  color: var(--text-soft);

  font-size: 15.5px;

}


.tech-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  list-style: none;

  margin:
    23px 0 0;

  padding: 0;

}


.tech-tags li {

  padding:
    6px 10px;

  border:
    1px solid var(--line);

  color: #9ca5b5;

  font-family:
    "JetBrains Mono",
    monospace;

  font-size: 10px;

}


/* ============================================================
   FEATURED PROJECT
   ============================================================ */

.featured-project {

  padding:
    32px 34px 35px;

  border:
    1px solid var(--line);

  background:

    linear-gradient(
      135deg,
      rgba(213, 170, 34, .045),
      transparent 50%
    );

}


.featured-project .timeline-marker {

  left: -72px;

}


/* ============================================================
   CONTACT
   ============================================================ */

.contact-grid {

  display: grid;

  grid-template-columns:
    minmax(0, .8fr)
    minmax(0, 1.2fr);

  gap: 80px;

  align-items: start;

}


.contact-info > p {

  max-width: 430px;

  margin-bottom: 24px;

  color: var(--text-soft);

  font-size: 16px;

}


.contact-email {

  display: inline-block;

  margin-bottom: 27px;

  color: var(--text);

  font-family:
    "JetBrains Mono",
    monospace;

  font-size: 14px;

  text-decoration: none;

  border-bottom:
    1px solid var(--line);

}


.contact-email:hover {

  color: var(--accent);

  border-color: var(--accent);

}


.contact-socials {

  display: flex;

  gap: 25px;

}


.contact-form {

  width: 100%;

}


.form-row {

  margin-bottom: 23px;

}


.form-row label {

  display: block;

  margin-bottom: 9px;

  color: #9ba3b2;

  font-family:
    "JetBrains Mono",
    monospace;

  font-size: 11px;

  text-transform: uppercase;

}


.form-row input,
.form-row textarea {

  display: block;

  width: 100%;

  padding: 14px 15px;

  border:
    1px solid var(--line);

  border-radius: 2px;

  outline: none;

  background: #15171c;

  color: var(--text);

  resize: vertical;

}


.form-row input {

  min-height: 52px;

}


.form-row textarea {

  min-height: 145px;

}


.form-row input:focus,
.form-row textarea:focus {

  border-color: #565c68;

  background: #17191f;

}


.contact-form .btn {

  width: 100%;

}


.form-note {

  width: 100%;

  margin:
    20px 0 0;

  color: var(--text-muted);

  text-align: center;

  font-size: 11px;

}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {

  margin-left: var(--nav-width);

  border-top:
    1px solid var(--line-soft);

}


.footer-inner {

  width: 100%;

  max-width: var(--max-width);

  margin: 0;

  min-height: 125px;

  padding:
    30px 70px;

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap: 30px;

}


.footer-name {

  margin:
    0 0 3px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-weight: 600;

}


.footer-email {

  color: var(--text-muted);

  font-family:
    "JetBrains Mono",
    monospace;

  font-size: 10px;

  text-decoration: none;

}


.footer-email:hover {

  color: var(--accent);

}


.footer-socials {

  display: flex;

  gap: 24px;

}


.footer-copy {

  margin: 0;

  color: var(--text-muted);

  font-family:
    "JetBrains Mono",
    monospace;

  font-size: 10px;

  text-align: right;

}


/* ============================================================
   REVEAL
   ============================================================ */

.reveal {

  opacity: 0;

  transform:
    translateY(22px);

  transition:
    opacity .7s ease,
    transform .7s ease;

}


.reveal.is-visible {

  opacity: 1;

  transform:
    translateY(0);

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1050px) {

  :root {
    --nav-width: 230px;
  }


  .site-nav {

    padding-left: 22px;
    padding-right: 22px;

  }


  .section {

    padding-left: 45px;
    padding-right: 45px;

  }


  .footer-inner {

    padding-left: 45px;
    padding-right: 45px;

  }


  .about-grid,
  .contact-grid {

    gap: 50px;

  }


  .scroll-cue {

    right: 30px;

  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 860px) {

  :root {

    --nav-width: 0px;

  }


  html {

    scroll-padding-top: 80px;

  }


  body {

    overflow-x: hidden;

  }


  main {

    margin-left: 0;

  }


  /* MOBILE HEADER */

  .site-nav {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    bottom: auto;

    width: 100%;

    height: 68px;

    padding:
      0 18px;

    border-right: 0;

    border-bottom:
      1px solid var(--line);

    background:
      rgba(11, 12, 14, .97);

    backdrop-filter:
      blur(14px);

    display: block;

    z-index: 2000;

  }


  .nav-top {

    height: 68px;

    margin: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

  }


  .nav-toggle {

    display: block;

    width: 44px;
    height: 44px;

    padding: 9px;

    border:
      1px solid var(--line);

    background: transparent;

    color: var(--text);

    cursor: pointer;

    position: relative;

    z-index: 2200;

    touch-action: manipulation;

    -webkit-tap-highlight-color:
      transparent;

  }


  .nav-toggle span {

    display: block;

    height: 1px;

    margin: 5px 0;

    background:
      currentColor;

  }


  /* MOBILE MENU */

  .nav-links {

    position: fixed;

    top: 68px;

    right: 0;

    bottom: 0;

    width:
      min(84vw, 340px);

    height:
      calc(100vh - 68px);

    padding:
      30px 25px;

    background: #0d0f12;

    border-left:
      1px solid var(--line);

    transform:
      translateX(105%);

    transition:
      transform .3s ease;

    overflow-y: auto;

    z-index: 2100;

  }


  .nav-links.is-open {

    transform:
      translateX(0);

  }


  .nav-links ul {

    display: flex;

    flex-direction: column;

  }


  .nav-link {

    padding:
      14px 0;

  }


  .nav-footer {

    margin-top: 45px;

  }


  /* SCREEN OVERLAY */

  .nav-scrim {

    position: fixed;

    inset: 0;

    display: block;

    background:
      rgba(0, 0, 0, .55);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
      opacity .25s ease,
      visibility .25s ease;

    z-index: 1900;

  }


  .nav-scrim.is-open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

  }


  /* SECTIONS */

  .section {

    min-height: auto;

    padding:
      78px 22px;

  }


  .section-inner {

    width: 100%;

    max-width: none;

    margin: 0;

  }


  /* HERO */

  .hero {

    min-height: 100vh;

    padding:
      110px 22px 80px;

  }


  .hero-name {

    margin-bottom: 34px;

    font-size:
      clamp(62px, 19vw, 105px);

  }


  .hero-headline {

    font-size:
      clamp(21px, 6vw, 29px);

  }


  .hero-intro {

    font-size: 14px;

  }


  .hero-actions {

    width: 100%;

    flex-direction: column;

    gap: 10px;

  }


  .hero-actions .btn {

    width: 100%;

  }


  .scroll-cue {

    display: none;

  }


  /* HEADINGS */

  h2 {

    margin-bottom: 50px;

    font-size:
      clamp(43px, 13vw, 58px);

  }


  /* ABOUT */

  .about-grid {

    grid-template-columns: 1fr;

    gap: 45px;

  }


  .about-copy {

    font-size: 15px;

  }


  /* TIMELINE */

  .timeline {

    padding-left: 30px;

  }


  .timeline::before {

    left: 6px;

  }


  .timeline-marker {

    left: -31px;

    width: 15px;
    height: 15px;

  }


  .timeline-item {

    margin-bottom: 55px;

  }


  .timeline-body h3 {

    font-size: 23px;

  }


  .timeline-body >
  p:not(.timeline-date):not(.timeline-org) {

    font-size: 14px;

  }


  .timeline-org {

    font-size: 15px;

  }


  .tech-tags {

    gap: 7px;

  }


  .tech-tags li {

    padding:
      6px 8px;

    font-size: 9px;

  }


  /* FEATURED */

  .featured-project {

    margin-left: -4px;

    padding:
      24px 19px 27px;

  }


  .featured-project .timeline-marker {

    left: -35px;

  }


  /* CONTACT */

  .contact-grid {

    grid-template-columns: 1fr;

    gap: 45px;

  }


  /* FOOTER */

  .site-footer {

    margin-left: 0;

  }


  .footer-inner {

    width:
      calc(100% - 44px);

    max-width: none;

    margin: 0 auto;

    padding:
      35px 0;

    min-height: auto;

    grid-template-columns: 1fr;

    gap: 22px;

    align-items: start;

  }


  .footer-copy {

    text-align: left;

  }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

  .site-nav {

    height: 64px;

  }


  .nav-top {

    height: 64px;

  }


  .nav-links {

    top: 64px;

    height:
      calc(100vh - 64px);

  }


  .section {

    padding:
      70px 17px;

  }


  .hero {

    padding:
      105px 17px 70px;

  }


  .hero-name {

    font-size: 18vw;

  }


  .hero-headline {

    font-size: 20px;

  }


  .hero-intro {

    font-size: 13px;

  }


  .eyebrow {

    font-size: 11px;

  }


  h2 {

    font-size: 42px;

  }


  .timeline {

    padding-left: 25px;

  }


  .timeline::before {

    left: 5px;

  }


  .timeline-marker {

    left: -27px;

    width: 13px;
    height: 13px;

  }


  .featured-project {

    margin-left: -7px;

    padding:
      21px 16px 24px;

  }


  .featured-project .timeline-marker {

    left: -29px;

  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

  }


  *,
  *::before,
  *::after {

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }


  .reveal {

    opacity: 1;

    transform: none;

  }

}