/* Google Fonts loaded via <link> in index.html — no @import needed */

/* =====================
   RESET
   ===================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =====================
   CUSTOM PROPERTIES
   ===================== */
:root {
  /* Colors */
  --color-bg:   #dcdcdc;
  --color-text: #1e1e1e;

  /* Grid background (light mode) */
  --grid-bg: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48ZGVmcz48ZmlsdGVyIGlkPSJyIiB4PSItNSUiIHk9Ii01JSIgd2lkdGg9IjExMCUiIGhlaWdodD0iMTEwJSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuMDYiIG51bU9jdGF2ZXM9IjMiIHNlZWQ9IjQiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48ZmVEaXNwbGFjZW1lbnRNYXAgaW49IlNvdXJjZUdyYXBoaWMiIHNjYWxlPSIwLjYiIHhDaGFubmVsU2VsZWN0b3I9IlIiIHlDaGFubmVsU2VsZWN0b3I9IkciLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIwLjM1Ii8+PC9maWx0ZXI+PHBhdHRlcm4gaWQ9Im1uIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGQ9Ik0yMCAwSDBWMjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgwLDAsMCwwLjA1NSkiIHN0cm9rZS13aWR0aD0iMC44IiBmaWx0ZXI9InVybCgjcikiLz48L3BhdHRlcm4+PHBhdHRlcm4gaWQ9Im1qIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTEwMCAwSDBWMTAwIiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMCwwLDAsMC4wOTkpIiBzdHJva2Utd2lkdGg9IjEiIGZpbHRlcj0idXJsKCNyKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNtbikiLz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI21qKSIvPjwvc3ZnPg==');

  /* Fonts */
  --font-heading: 'Syne', sans-serif;
  --font-body:    'Ubuntu Mono', monospace;

  /* Type scale */
  --text-sm:   0.875rem;  /*  14px */
  --text-base: 1.125rem;  /*  18px */
  --text-lg:   1.25rem;   /*  20px */
  --text-xl:   2.8rem;    /*  ~45px — h3 */
  --text-2xl:  3.8rem;    /*  ~61px — h2 */
  --text-3xl:  4.2rem;    /*  ~67px — h1 */
  --text-4xl:  7rem;      /* 112px — marquee */

  /* Spacing (used in layout phases) */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  2.5rem;
  --space-xl:  8rem;
  --space-2xl: 4rem;

  /* Layout */
  --max-width: 1000px;   /* page content cap */
  --col-left:  266px;    /* left column width in two-column grids */
  --gap-grid:  2.2rem;   /* standard column gap */
}

/* Dark mode overrides */
[data-theme="dark"] {
  --color-bg:   #1e1e1e;
  --color-text: #dcdcdc;
  --grid-bg: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48ZGVmcz48ZmlsdGVyIGlkPSJyIiB4PSItNSUiIHk9Ii01JSIgd2lkdGg9IjExMCUiIGhlaWdodD0iMTEwJSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuMDYiIG51bU9jdGF2ZXM9IjMiIHNlZWQ9IjQiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48ZmVEaXNwbGFjZW1lbnRNYXAgaW49IlNvdXJjZUdyYXBoaWMiIHNjYWxlPSIwLjYiIHhDaGFubmVsU2VsZWN0b3I9IlIiIHlDaGFubmVsU2VsZWN0b3I9IkciLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIwLjM1Ii8+PC9maWx0ZXI+PHBhdHRlcm4gaWQ9Im1uIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGQ9Ik0yMCAwSDBWMjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyMjAsMjIwLDIyMCwwLjA1NSkiIHN0cm9rZS13aWR0aD0iMC44IiBmaWx0ZXI9InVybCgjcikiLz48L3BhdHRlcm4+PHBhdHRlcm4gaWQ9Im1qIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTEwMCAwSDBWMTAwIiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMjIwLDIyMCwyMjAsMC4wOTkpIiBzdHJva2Utd2lkdGg9IjEiIGZpbHRlcj0idXJsKCNyKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNtbikiLz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI21qKSIvPjwvc3ZnPg==');
}

/* =====================
   BASE
   ===================== */
html {
  font-size: 100%;
}

body {
  background-color: var(--color-bg);
  /* graph-paper grid: SVG with feTurbulence displacement + feGaussianBlur for a printed-paper feel */
  /* to revert to plain CSS gradients: git checkout HEAD~1 -- style.css */
  background-image: var(--grid-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  transition: background-color 0.3s ease, color 0.3s ease;
}

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

a {
  color: inherit;
}

ul {
  list-style: disc;
  padding-left: 1.25rem;
}

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

/* h1, h2, h3 — Syne, uppercase */
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }

/* h4 — Ubuntu Mono bold italic (role titles) */
h4 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  font-style: italic;
}

/* =====================
   HEADER
   ===================== */
header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-sm) var(--space-md);
}

.site-name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

header nav {
  display: flex;
  gap: var(--space-md);
}

header nav a {
  font-size: var(--text-base);
  text-decoration: none;
}

.nav-divider {
  display: inline-block;
  width: 1px;
  height: 1em;
  background-color: var(--color-text);
  filter: url(#rough-line);
  opacity: 0.7;
  align-self: center;
  user-select: none;
}

.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  color: var(--color-text);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.theme-toggle:hover {
  opacity: 1;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* Show moon in light mode, sun in dark mode */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }

[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  position: relative;
  width: 24px;
  height: 18px;
  flex-shrink: 0;
}

.nav-toggle span {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.nav-toggle span:first-child {
  transform: translateY(calc(-50% - 4px));
}

.nav-toggle span:last-child {
  transform: translateY(calc(-50% + 4px));
}

.nav-toggle.is-open span:first-child {
  transform: translateY(-50%) rotate(45deg);
}

.nav-toggle.is-open span:last-child {
  transform: translateY(-50%) rotate(-45deg);
}

/* =====================
   HERO
   ===================== */
.hero {
  display: grid;
  grid-template-columns: var(--col-left) 1fr;
  gap: var(--gap-grid);
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

.hero img {
  width: 100%;
}

/* =====================
   INTRO
   ===================== */
.intro {
  display: grid;
  grid-template-columns: var(--col-left) 1fr;
  gap: var(--gap-grid);
  align-items: start;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-md) var(--space-md) var(--space-lg);
}

.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.6;
}

.section-label::before {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-text);
  filter: url(#rough-line);
}

.intro p + p {
  margin-top: var(--space-sm);
}

/* =====================
   WAVY DIVIDER
   ===================== */
.wavy-divider {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  padding: var(--space-sm) 0;
}

.wavy-divider svg {
  display: block;
  width: 100%;
  height: 24px;
}

/* =====================
   EXPERIENCE
   ===================== */
.experience {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

.experience > h2 {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.experience-item {
  display: grid;
  grid-template-columns: var(--col-left) 1fr;
  gap: var(--gap-grid);
  align-items: start;
}

.experience-item + .experience-item {
  margin-top: var(--space-lg);
}

.experience-item > time {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-base);
  font-weight: 700;
  padding-top: var(--space-sm);
}

.experience-item > time::before {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-text);
  filter: url(#rough-line);
}

.experience-content h3 {
  margin-bottom: var(--space-xs);
}

.experience-content h4 {
  margin-bottom: var(--space-sm);
}

.experience-content p {
  margin-bottom: var(--space-sm);
  font-style: italic;
}

/* =====================
   EDUCATION / COMPETENCIES / INTERESTS
   ===================== */
.education,
.competencies,
.interests {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  align-items: center;
}

.edu-school {
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

/* =====================
   REACH OUT MARQUEE
   ===================== */
.marquee-section {
  overflow: hidden;
  padding: var(--space-2xl) 0 var(--space-xs);
  color: var(--color-text);
}

.marquee-link {
  display: block;
  cursor: pointer;
}

.marquee-wave {
  width: 100%;
  line-height: 0;
}

/* =====================
   FOOTER
   ===================== */
footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-xs) var(--space-md) var(--space-md);
  font-size: var(--text-base);
}

/* =====================
   MOBILE
   ===================== */
@media (max-width: 768px) {

  :root {
    --space-lg: 2rem;
  }

  /* --- Header / Nav --- */
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .site-name,
  .nav-toggle {
    position: relative;
    z-index: 100;
  }

  .site-nav {
    display: none;
  }

  .site-nav.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--color-bg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: 0 var(--space-md);
  }

  .site-nav.is-open a {
    font-size: var(--text-lg);
    text-align: center;
    padding: var(--space-xs) var(--space-sm);
    text-decoration: none;
  }

  body.nav-open {
    overflow: hidden;
  }

  body {
    overflow-x: hidden;
    overflow-wrap: break-word;
  }

  /* --- Hero --- */
  .hero {
    display: flex;
    flex-direction: column;
    padding: 1.6rem var(--space-md) 0;
    max-width: none;
  }

  .hero h1 {
    order: -1;
    font-size: 2.5rem;
    position: relative;
    z-index: 1;
  }

  .hero img {
    width: 100%;
    aspect-ratio: 15 / 14;
    object-fit: cover;
    object-position: center;
    margin-top: -6rem;
  }

  /* --- Intro --- */
  .intro {
    display: block;
  }

  .section-label::before {
    display: none;
  }

  /* --- Experience --- */
  .experience > h2 {
    font-size: 2.2rem;
  }

  .experience-item {
    display: block;
  }

  .experience-item > time {
    display: block;
    margin-bottom: var(--space-xs);
  }

  .experience-item > time::before {
    display: block;
    width: 100%;
    margin-bottom: var(--space-xs);
  }

  h3 {
    font-size: 1.5rem;
  }

  /* --- Education / Competencies / Interests --- */
  .education,
  .competencies,
  .interests {
    display: flex;
    flex-direction: column;
  }

  .education h3,
  .interests h3 {
    order: -1;
  }

  .education > h3,
  .competencies > h3,
  .interests > h3 {
    font-size: 2.0rem;
  }

  /* --- Footer --- */
  footer {
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    border-top: none;
  }

  /* --- Mobile nav open animation --- */
  .site-nav.is-open {
    animation: fade-in 0.25s ease both;
  }

  .site-nav.is-open a:nth-child(1) {
    animation: fade-up 0.35s 0.10s ease both;
  }

  .site-nav.is-open a:nth-child(2) {
    animation: fade-up 0.35s 0.20s ease both;
  }

  .nav-divider {
    display: none;
  }

  .theme-toggle svg {
    width: 24px;
    height: 24px;
  }

}

/* =====================
   ANIMATIONS
   ===================== */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Page-load: header */
.site-name {
  animation: fade-up 0.5s ease both;
}

header nav {
  animation: fade-in 0.5s 0.15s ease both;
}

/* Page-load: hero */
.hero picture {
  animation: fade-in 0.8s 0.1s ease both;
}

.hero h1 {
  animation: fade-up 0.6s 0.35s ease both;
}

/* Scroll-triggered */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--anim-delay, 0ms);
}

/* Animation delay classes (CSP-safe alternative to inline style) */
.anim-delay-100 { --anim-delay: 100ms; }
.anim-delay-150 { --anim-delay: 150ms; }
.anim-delay-200 { --anim-delay: 200ms; }
.anim-delay-300 { --anim-delay: 300ms; }
.anim-delay-400 { --anim-delay: 400ms; }
.anim-delay-500 { --anim-delay: 500ms; }

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: none;
}

.animate-on-scroll.fade-only {
  transform: none;
}

/* Draw-in dividers: container is always visible; path animates */
.animate-on-scroll.draw-in {
  opacity: 1;
  transform: none;
}

.draw-in path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 0.8s ease;
}

.draw-in.is-visible path {
  stroke-dashoffset: 0;
}

/* Right-to-left: mirror the SVG horizontally */
.draw-rtl svg {
  transform: scaleX(-1);
}

/* Hidden SVG container for shared filters/defs (visually hidden, no inline style) */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Marquee SVG (injected by marquee.js) */
.marquee-svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.marquee-text {
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay:    0ms   !important;
    transition-duration: 0.01ms !important;
  }
}