@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* Base layout */
:root {
  --page-gutter: clamp(1.25rem, 4vw, 5rem);
  --content-width: 76rem;
  --header-height: 4.5rem;
  --line: rgba(255, 255, 255, .12);
  --text: #f5f5f1;
  --heading: #ffffff;
  --muted: #b5b5b2;
  --surface: rgba(255, 255, 255, .055);
  --background: #0a0b0d;
  --background-strong: #05070a;
  --accent: #e50914;
  --accent-soft: #ff3b45;
  --shadow-soft: 0 1.25rem 2.75rem rgba(0, 0, 0, 0.24);
  --shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 1rem 2rem rgba(229, 9, 20, 0.12);
  --radius: .35rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; color: var(--text); background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.08), transparent 18%),
    radial-gradient(circle at 80% 0%, rgba(229,9,20,.14), transparent 24%),
    linear-gradient(180deg, var(--background-strong), var(--background));
  font-family: "DM Sans", sans-serif; line-height: 1.6; overflow-x: hidden; max-width: 100vw; background-attachment: fixed; }
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.container { width: min(100% - (var(--page-gutter) * 2), var(--content-width)); margin-inline: auto; }
.section { padding-block: clamp(5rem, 12vw, 9rem); scroll-margin-top: var(--header-height); }
.section + .section { border-top: 1px solid var(--line); }
#portfolio, #contact { background: linear-gradient(135deg, rgba(255, 250, 242, .028), transparent 42%); }

/* Header and navigation */
.site-header { position: fixed; inset: 0 0 auto; z-index: 10; background: rgba(10, 12, 16, .8); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(18px); box-shadow: inset 0 -1px 0 rgba(255,255,255,.02); }
.navbar { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { color: var(--heading); font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: -.04em; white-space: nowrap; text-shadow: 0 0 18px rgba(255,255,255,.12); }
.nav-links { display: flex; gap: clamp(1rem, 3vw, 2.5rem); padding: 0; margin: 0; list-style: none; }
.nav-links a { display: block; padding-block: .5rem; color: var(--muted); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; transition: color .2s ease, transform .2s ease; }
.nav-links a:hover, .social-links a:hover { color: var(--accent); text-decoration: underline; }
.menu-toggle { display: none; border: 0; background: transparent; padding: .5rem; cursor: pointer; }
.menu-toggle span { display: block; width: 1.5rem; height: 2px; margin: 4px 0; background: var(--text); }

/* Sections */
.eyebrow { margin: 0 0 1rem; color: var(--muted); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Space Grotesk", sans-serif; }
h1 { max-width: 12ch; margin-bottom: 1.5rem; color: var(--heading); font-size: clamp(2.75rem, 8vw, 6.5rem); font-weight: 700; line-height: .98; letter-spacing: -.045em; }
h2 { margin-bottom: 2rem; color: var(--heading); font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -.04em; line-height: 1; font-weight: 600; }
h3 { margin-bottom: .25rem; color: var(--heading); }
.button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; padding: .8rem 1.35rem; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(135deg, rgba(229,9,20,.96), rgba(179,7,14,.92)); color: #ffffff; box-shadow: 0 .8rem 1.6rem rgba(229,9,20,.18), inset 0 1px 0 rgba(255,255,255,.12); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.button:hover { filter: brightness(1.05); box-shadow: 0 1rem 2rem rgba(229,9,20,.22), inset 0 1px 0 rgba(255,255,255,.18); transform: translateY(-.08rem); }

.section-heading { margin-bottom: 2.5rem; }
.portfolio-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, .8fr); gap: clamp(2rem, 8vw, 8rem); align-items: end; margin-bottom: 3.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.portfolio-intro .section-heading { margin-bottom: 0; }
.portfolio-intro h2 { margin-bottom: 0; }
.portfolio-intro-side { max-width: 28rem; }
.portfolio-intro-side > p { margin-bottom: 1.25rem; color: var(--muted); }
.expertise-list { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: var(--heading); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.expertise-list span + span::before { margin-right: 1rem; color: var(--accent); content: "/"; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.project-card { overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.04); cursor: pointer; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.project-card:hover, .project-card:focus-visible { border-color: rgba(255,255,255,.18); box-shadow: 0 1.6rem 3.2rem rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.06); transform: translateY(-.2rem); outline: none; }
.media-placeholder, .profile-placeholder { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }
.media-placeholder { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-bottom: 1px solid var(--line); background: #050506; }
.media-placeholder::after { position: absolute; inset: 1rem; border: 1px solid rgba(211, 213, 215, .14); content: ""; transition: border-color .25s ease, inset .25s ease; }
.project-card:hover .media-placeholder::after, .project-card:focus-visible .media-placeholder::after { inset: .8rem; border-color: rgba(255,255,255,.26); }
.project-image { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(1.05); transition: transform .5s ease, filter .5s ease; }
.project-card:hover .project-image, .project-card:focus-visible .project-image { filter: saturate(1); transform: scale(1.04); }
.profile-placeholder img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.25rem; }
.project-category { margin-bottom: .5rem; color: var(--accent-soft); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.project-meta h3 { margin: 0; font-size: 1.15rem; }
.project-arrow { color: var(--accent); font-size: 1.5rem; line-height: 1; transition: transform .25s ease, color .25s ease; }
.project-card:hover .project-arrow, .project-card:focus-visible .project-arrow { transform: translate(.14rem, -.12rem); }
.project-card:hover .project-arrow, .project-card:focus-visible .project-arrow { color: var(--accent-soft); transform: translate(.15rem, -.15rem); }

.bio-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 8vw, 7rem); align-items: start; }
.profile-placeholder { aspect-ratio: 4 / 5; box-shadow: var(--shadow-soft); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.bio-content { max-width: 34rem; }
.bio-content > p { margin-bottom: 1.35rem; color: var(--muted); }
.skills-list { display: grid; gap: .5rem; padding: 0; list-style: none; }
.skills-list li { padding-block: .75rem; border-bottom: 1px solid var(--line); }

.contact-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 8vw, 7rem); }
.contact-form { display: grid; gap: .5rem; }
.contact-form input, .contact-form textarea { width: 100%; padding: .85rem 1rem; border: 1px solid rgba(255,255,255,.08); border-radius: .25rem; background: rgba(255,255,255,.02); color: var(--text); resize: vertical; box-shadow: inset 0 1px 0 rgba(255,255,255,.02); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.contact-form input:focus, .contact-form textarea:focus { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.025); box-shadow: 0 0 0 3px rgba(255,255,255,.04), 0 0 18px rgba(255,255,255,.03), inset 0 1px 0 rgba(255,255,255,.04); outline: none; }
.contact-form input { margin-bottom: .75rem; }
.contact-form .button { justify-self: start; margin-top: 1rem; }
.social-links { grid-column: 2; display: flex; gap: 1.5rem; margin-top: 3rem; }
.social-links a { transition: color .2s ease, transform .2s ease; }
.social-links a:hover { transform: translateY(-1px); }

.site-footer { border-top: 1px solid var(--line); }
.footer-content { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; color: var(--muted); font-size: .875rem; }
.footer-content p { margin: 0; }
.footer-content a:hover { color: var(--text); text-decoration: underline; }

@media (max-width: 700px) {
  .menu-toggle { display: block; }
  .nav-links { display: none; position: absolute; inset: var(--header-height) 0 auto; flex-direction: column; gap: 0; padding: .75rem var(--page-gutter) 1.25rem; background: var(--background); border-bottom: 1px solid var(--line); }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding-block: .75rem; }
  .portfolio-intro, .portfolio-grid, .bio-layout, .contact-layout { grid-template-columns: 1fr; }
  .portfolio-intro { gap: 1.5rem; margin-bottom: 2.5rem; }
  .social-links { grid-column: auto; }
  .footer-content { align-items: flex-start; flex-direction: column; }
}