:root {
  --bg-global: #F1F5F9;
  --bg-card: #FFFFFF;
  --text-main: #1E293B;
  --tech-header-bg: #1E293B;
  --tech-header-text: #FFFFFF;
  --tech-title: #0F172A;
  --tech-cta-bg: #1E293B;
  --tech-cta-hover: #334155;

  --ad-header-bg: #B4462B;
  --ad-header-text: #FFFFFF;
  --ad-title: #7C2D12;
  --ad-cta-bg: #B4462B;
  --ad-cta-hover: #C2593F;

  --font-headings: 'Josefin Sans', sans-serif;
  --font-body: 'Open Sans', sans-serif;
}

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY — all font sizes live here, edit freely
   ══════════════════════════════════════════════════════════════
   Scale (Major Third, base 16px = 1rem):
     body / p   1rem        16px
     h4         1.25rem     20px
     h3         1.5rem      24px
     h2         1.75rem     28px
     h1         2rem        32px
   ══════════════════════════════════════════════════════════════ */

/* ─ Scale defaults (body base is set in the body rule below) ─ */
h1 { font-size: 2rem;    }    /* 32px */
h2 { font-size: 1.75rem; }    /* 28px */
h3 { font-size: 1.5rem;  }    /* 24px */
h4 { font-size: 1.25rem; }    /* 20px */

/* ─ Component overrides ─ */
nav a               { font-size: 0.875rem;  }  /* 14px                     */
.btn-project-tech,
.btn-project-ad     { font-size: 0.875rem; }  /* 14px — project CTAs      */
.footer-clock       { font-size: 0.875rem;  }  /* 14px                     */
.footer-copy        { font-size: 0.875rem;  }  /* 14px                     */

/* ─ Mobile (≤ 768px) ─ */
@media (max-width: 768px) {
  header h1 { font-size: 2.375rem;  }  /* 38px */
  nav a     { font-size: 0.8125rem; }  /* 13px */
}

/* ─ Small phones (≤ 480px) ─ */
@media (max-width: 480px) {
  header h1 { font-size: 1.875rem; }   /* 30px */
}

/* ══════════════════════════════════════════════════════════════ */

/* ── Reset ── */
html {
  scroll-behavior: smooth;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-family: var(--font-body);
  background-color: var(--bg-global);
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-headings);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-top: 0;
  margin-bottom: 0.5em;
}

p {
  margin: 0;
}

/* ── Header ── */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 48px 60px 5px;
  background-color: var(--bg-global);
}

header h1 {
  color: var(--tech-header-bg);
  margin: 0;
}

nav {
  display: flex;
  gap: 8px;
  align-items: center;
}

nav a {
  display: inline-block;
  padding: 4px 2px;
  background-color: transparent;
  color: var(--text-main);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s ease;
}

nav a:not(.btn-project-ad):hover {
  color: var(--ad-header-bg);
}

/* ── Main wrapper ── */
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 60px;
}

/* ── About ── */
#about-hero {
  padding: 48px 0 72px;
}

#about-hero h2 {
  margin-bottom: 28px;
}

.about-content {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.avatar-frame {
  border-radius: 50%;
  padding: 5px;
  background: conic-gradient(var(--ad-header-bg) 0deg 360deg);
  display: inline-flex;
  flex-shrink: 0;
}

.avatar-frame:hover {
  background: conic-gradient(var(--ad-header-bg) 0deg 180deg, var(--tech-header-bg) 180deg 360deg);
}

.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background-color: #CBD5E1;
}

.about-text p + p {
  margin-top: 16px;
}

/* ── Hero ── */
#hero-section {
  position: relative;
  min-height: calc(100vh - 90px);
  display: flex;
  align-items: center;
  padding-bottom: 90px;
}

.hero-bg-icons {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-20%, -50%);
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
}

.hero-bg-icon {
  width: 375px;
  height: 375px;
  display: block;
}

.hero-left {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 600px;
}

.hero-greeting {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text-main);
  margin: 0;
  animation: heroFadeUp 0.5s ease both;
}

.hero-name {
  font-size: 3rem;
  margin: 0;
  line-height: 1.1;
  animation: heroFadeUp 0.5s ease both;
  animation-delay: 0.08s;
}

.hero-name-rust {
  color: var(--ad-header-bg);
}

.hero-tagline {
  font-size: 1.125rem;
  color: #475569;
  margin: 8px 0 0;
  animation: heroFadeUp 0.5s ease both;
  animation-delay: 0.14s;
}

#hero-greeting-text::after,
.jp-label::after {
  content: none;
}

#hero-greeting-text:hover::after,
.jp-label:hover::after {
  content: ' (' attr(data-translation) ')';
}

.hero-location {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: #94A3B8;
  margin: 0;
  animation: heroFadeUp 0.5s ease both;
  animation-delay: 0.2s;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── My Work ── */
#work-section {
  padding: 48px 0 72px;
}

.work-intro {
  text-align: center;
  margin-bottom: 36px;
}

.work-intro h2 {
  margin-bottom: 8px;
}

.work-intro p {
  line-height: 1.7;
}

.project-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* ── Columns ── */
.column {
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 20px;
}

.tech-column     { background-color: var(--tech-header-bg); }
.creative-column { background-color: var(--ad-header-bg); }
.neutral-column  { background-color: #475569; }
.detail-exp-card { background-color: var(--ad-header-bg); }

.column-header {
  padding: 20px 16px;
  text-align: center;
}

.column-header h3 {
  color: #FFFFFF;
  margin: 0;
  letter-spacing: 0;
}

/* ── Project cards ── */
.project-card {
  background-color: var(--bg-card);
  border-radius: 12px;
  margin: 0 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-img {
  width: 100%;
  height: 375px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background-color: #CBD5E1;
}

.project-card h4 {
  text-align: center;
  margin: 0;
}

.tech-column .project-card h4 { color: var(--tech-title); }
.creative-column  .project-card h4  { color: var(--ad-title); }

.project-card p {
  line-height: 1.55;
}

.card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.card-date {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(15, 23, 42, 0.07);
  color: #64748B;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
}

.status-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.status-shipped      { background: #DCFCE7; color: #15803D; }
.status-in-review    { background: #F5F3FF; color: #6D28D9; }
.status-presented    { background: #F1F5F9; color: #475569; }
.status-first-place  { background: #FDE68A; color: #78350F; }

.btn-project-tech,
.btn-project-ad {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn-project-tech {
  background-color: var(--tech-cta-bg);
  color: var(--tech-header-text);
}
.btn-project-tech:hover { background-color: var(--tech-cta-hover); }

.btn-project-ad {
  background-color: var(--ad-cta-bg);
  color: var(--ad-header-text);
}
.btn-project-ad:hover { background-color: var(--ad-cta-hover); }

.btn-coming-soon {
  background-color: #CBD5E1;
  color: #94A3B8;
  cursor: not-allowed;
  pointer-events: none;
}



/* ── Split Brain ── */
#split-brain {
  padding: 48px 0 72px;
  text-align: center;
}

.split-brain-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 20px;
}

.split-brain-icon {
  width: 56px;
  height: 56px;
}

.split-brain-heading {
  margin-bottom: 12px;
}

.split-brain-copy {
  max-width: 480px;
  margin: 0 auto;
  color: #64748B;
  line-height: 1.7;
}

/* ── Education & Experience ── */
#bio-details {
  padding: 48px 0 72px;
}

.detail-card {
  background-color: var(--bg-card);
  border-radius: 12px;
  margin: 0 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-institution {
  font-weight: 600;
  margin-bottom: 2px;
}

.detail-location {
  margin-bottom: 10px;
}

/* ── Tools ── */
#tools-section {
  padding: 48px 0 72px;
  text-align: center;
}

#tools-section h2 {
  margin-bottom: 32px;
}


/* The viewport window that crops the overflow */
.marquee-container {
  overflow: hidden;
  display: flex;
  user-select: none;
  
  /* 🛠️ FIX 2: Constrain the width and center it on the desktop layout */
  max-width: 600px;     /* Adjust this number down if you want it even narrower */
  margin: 0 auto;       /* Centers the container horizontally on the page */

  /* Premium edge fade-out gradient mask */
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 15%,
    #000 85%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 15%,
    #000 85%,
    transparent
  );
}

/* The structural scrolling track */
.marquee-track {
  display: flex;
  width: max-content;
  animation: scrollMarquee 25s linear infinite;
  padding: 48px 0 12px;
}

/* Pause everything gracefully when looking closely at an icon */
.marquee-track:hover {
  animation-play-state: paused;
}

/* Handles the inline flex spacing for each group block */
.marquee-group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 32px;            /* Clean spacing between the tool icons */
  padding-right: 32px;   /* Must match the gap exactly for a perfect loop jump */
}

.tool-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tool-wrap::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #1E293B;
  color: #F8FAFC;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.tool-wrap:hover::after {
  opacity: 1;
}

.tool-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 8px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
}

.tool-icon:hover {
  filter: brightness(1.1);
  transform: translateY(-4px) scale(1.08);
}

/* The core engine keyframe */
@keyframes scrollMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* ── Footer ── */
footer {
  padding: 48px 60px;
  background-color: var(--tech-header-bg);
  border-top: 1px solid #334155;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}


.footer-name-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.footer-site-name {
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #F8FAFC;
}

.footer-clock {
  color: #94A3B8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-copy {
  color: #94A3B8;
}

.footer-section-heading {
  color: #F8FAFC;
  margin: 0 0 8px;
  text-align: left;
}

.theme-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
  filter: brightness(0) saturate(100%) invert(68%) sepia(10%) saturate(440%) hue-rotate(183deg) brightness(101%) contrast(90%);
}

.license-link {
  color: #94A3B8;
  text-decoration: none;
  transition: color 0.2s ease;
}

.license-link:hover {
  color: #CBD5E1;
}

.footer-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  flex-shrink: 0;
}

.footer-nav-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-nav-links a {
  color: #F8FAFC;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

.footer-nav-links a:hover {
  color: #CBD5E1;
}

.footer-contact-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-contact-links a,
.footer-contact-links button {
  color: #F8FAFC;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease;
}

.footer-contact-links a:hover,
.footer-contact-links button:hover {
  color: #CBD5E1;
}

.link-icon {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-left: 4px;
}

.flag-icon {
  width: 20px;
  height: 14px;
  object-fit: cover;
  vertical-align: middle;
  border-radius: 2px;
  margin-right: 2px;
}


/* ── Responsive: tablet & mobile (≤ 768px) ── */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 24px;
  }

  nav {
    flex-wrap: wrap;
  }

  nav a {
    padding: 6px 14px;
  }

  main {
    padding: 0 24px;
  }

  #about-hero {
    padding: 36px 0 56px;
  }

  .about-content {
    flex-direction: column;
    align-items: center;
  }

  .project-grid {
    grid-template-columns: 1fr;
  }

  .card-img {
    height: 220px;
  }

  #bio-details {
    flex-direction: column;
    gap: 40px;
    padding: 36px 0 56px;
  }

  #tools-section {
    padding: 36px 0 56px;
  }

  footer {
    flex-direction: column;
    gap: 36px;
    padding: 36px 24px;
  }

}

/* ── Responsive: small phones (≤ 480px) ── */
@media (max-width: 480px) {
  main {
    padding: 0 16px;
  }

  footer {
    padding: 32px 16px;
  }
}

/* ── Case study page ── */
.case-study-page main {
  max-width: 900px;
  padding: 48px 60px 80px;
}

.case-study-hero {
  margin-bottom: 48px;
}

.case-study-hero h1 {
  color: var(--tech-title);
}

.case-study-subtitle {
  color: #475569;
  font-size: 0.9375rem;
  margin-top: 8px;
}

.case-study-section {
  margin-bottom: 40px;
}

.case-study-section h2 {
  font-size: 1.125rem;
  color: var(--tech-title);
  margin-bottom: 12px;
}

.case-study-section p,
.case-study-section ul {
  color: #475569;
  line-height: 1.8;
}

.case-study-section ul {
  margin: 0;
  padding-left: 20px;
}

.case-study-section li {
  margin-bottom: 10px;
}

.case-study-actions {
  margin-top: 16px;
}

.case-study-hero-video {
  width: 100%;
  border-radius: 12px;
  margin-top: 24px;
  display: block;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.case-study-gallery {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 16px;
}

.case-study-figure {
  width: 75%;
  margin: 0 auto;
}

.case-study-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  display: block;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.case-study-figure figcaption {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #64748B;
  text-align: center;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .case-study-figure {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .case-study-page main {
    padding: 36px 24px 64px;
  }
}

@media (max-width: 480px) {
  .case-study-page main {
    padding: 28px 16px 56px;
  }
}

/* ── Lab page ── */
#lab-section {
  padding: 48px 0 72px;
}

.lab-project {
  margin-bottom: 48px;
}

.lab-ad-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-items: start;
}

.lab-ad-item {
  margin: 0;
}

.lab-ad-item img,
.lab-ad-item video {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  cursor: zoom-in;
}

.lab-zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.90);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  cursor: zoom-out;
}

.lab-zoom-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.lab-zoom-media {
  max-width: 90vw;
  max-height: 88vh;
  border-radius: 8px;
  object-fit: contain;
  display: block;
  cursor: default;
}

.lab-zoom-close {
  position: fixed;
  top: 20px;
  right: 24px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 1.125rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  z-index: 1001;
}

.lab-zoom-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

@media (max-width: 768px) {
  .lab-ad-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}