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

/* ─── DESIGN TOKENS ─── */
:root {
  --green:     #3aff3a;
  --dim:       #7acc7a;
  --muted:     #2d6b2d;
  --bg:        #0f0f0f;
  --rule:      #2e2e2e;
  --pad:       20px;
  --col-width: 200px;
  --logo-h:    72px;   /* fixed header height on mobile */
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--green);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

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

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

/* ─── TYPOGRAPHY ─── */
.section-heading {
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--green);
  font-weight: 500;
  margin-bottom: 18px;
}

.desk-break { display: none; }

.bio-text {
  color: var(--dim);
  font-weight: 300;
  line-height: 1.55;
  margin-bottom: 10px;
}
.bio-text:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════
   MOBILE-FIRST LAYOUT  (< 1024px)
   Single-column, page scrolls normally
════════════════════════════════════════ */

.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Logo / header bar — fixed at top on mobile ── */
.logo-row {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  height: var(--logo-h);
  padding: 0 var(--pad);
  padding-top: 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.nav-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  margin-top: -3px;
  margin-right: -1px;
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

.logo-text {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.3;
  margin-bottom: 2px;
}

/* Pushes body content below fixed bar */
#logo-spacer { height: var(--logo-h); }

/* ── Left column (bio) ── */
.col-left {
  display: flex;
  flex-direction: column;
}

.left-section {
  padding: 28px var(--pad) 32px;
  border-bottom: 1px solid var(--rule);
}

/* Desktop-only elements hidden on mobile */
.flex-spacer { display: none; }
#clock       { display: none; }

/* ── Centre feed ── */
.col-centre { width: 100%; }

.portfolio-header {
  position: sticky;
  top: var(--logo-h);
  z-index: 10;
  padding: 18px var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.portfolio-header .section-heading { margin-bottom: 0; }

/* ── Projects ── */
.project {
  padding: 32px var(--pad);
  border-bottom: 1px solid var(--rule);
}

/* ── Slideshow ── */
.slideshow {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  margin-bottom: 14px;
}

.slides-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: #090909;
  height: 280px;
}

.slides-track {
  display: flex;
  height: 100%;
  transition: transform 0.42s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
}

.slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.93;
}

/* ── Arrow buttons ── */
.arrow-btn {
  flex-shrink: 0;
  width: 44px;
  min-height: 44px;       /* touch target */
  background: none;
  border: none;
  color: var(--green);
  cursor: pointer;
  font-size: 20px;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.arrow-btn.prev { border-right: 1px solid var(--rule); }
.arrow-btn.next { border-left:  1px solid var(--rule); }
.arrow-btn:hover:not(.disabled) { background: #162016; }
.arrow-btn.disabled { opacity: 0.13; cursor: default; pointer-events: none; }

/* ── Slide footer ── */
.slide-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.counter-text {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.counter-dots {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a4a2a;
  cursor: pointer;
  transition: background 0.2s;
}
.dot.active { background: var(--green); }

/* ── Project text ── */
.project-title {
  font-size: 14px;
  font-weight: 400;
  color: var(--green);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

.project-desc {
  color: var(--dim);
  font-weight: 300;
  line-height: 1.6;
}

/* ── Right column ── */
.right-header {
  padding: 28px var(--pad) 0;
}
.right-header .section-heading { margin-bottom: 18px; }

#edu-section { padding-top: 4px; }

.right-section {
  padding: 28px var(--pad);
  border-bottom: 1px solid var(--rule);
}
.right-section:last-child { border-bottom: 1px solid var(--rule); }

.cv-item {
  margin-bottom: 16px;
  color: var(--dim);
  font-weight: 300;
  line-height: 1.6;
}
.cv-item:last-child { margin-bottom: 0; }

.cv-item strong {
  color: var(--green);
  font-weight: 500;
  display: block;
  margin-bottom: 1px;
}

.contact-row {
  margin-bottom: 16px;
  line-height: 1.5;
}
.contact-row:last-child { margin-bottom: 0; }

.c-label {
  display: block;
  color: var(--green);
  font-weight: 500;
  font-size: inherit;
  margin-bottom: 1px;
}

.contact-row a,
.contact-row span:not(.c-label) {
  color: var(--dim);
  font-weight: 300;
  word-break: break-all;
}
.contact-row a:hover { color: var(--green); }

/* ── Mobile clock bar (fixed at bottom) ── */
#mobile-clock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 13px var(--pad) calc(13px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  background: var(--bg);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

#mobile-clock-spacer { height: 50px; }

.feed-footer { height: 0; }

/* ════════════════════════════════════════
   TABLET  (≥ 768px)
   Still single column, more breathing room
════════════════════════════════════════ */
@media (min-width: 768px) {
  :root {
    --pad:    28px;
    --logo-h: 72px;
  }

  body { font-size: 14.5px; }

  .logo-text { font-size: 17px; }

  .left-section  { padding: 32px var(--pad); }
  .right-section { padding: 32px var(--pad); }
  .project       { padding: 40px var(--pad); }
  .portfolio-header { padding: 22px var(--pad); }

  .slides-viewport { height: 380px; }

  .arrow-btn { width: 52px; font-size: 22px; }

  .section-heading { font-size: 16px; }
}

/* ════════════════════════════════════════
   DESKTOP  (≥ 1024px)
   Three-panel layout, body overflow hidden,
   each column scrolls independently
════════════════════════════════════════ */
@media (min-width: 1024px) {
  :root {
    --pad:       28px;
    --col-width: 240px;
  }

  body { overflow: hidden; font-size: 14.5px; }

  /* ── Shell → CSS Grid ── */
  .shell {
    display: grid;
    grid-template-columns: var(--col-width) 1fr var(--col-width);
    grid-template-rows: 100vh;
    height: 100vh;
    width: 100vw;
    flex-direction: unset;
    min-height: unset;
  }

  /* ── Left column ── */
  .col-left {
    grid-column: 1;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    border-right: 1px solid var(--rule);
    padding: 0;
  }
  .col-left::-webkit-scrollbar { display: none; }

  /* Logo row reverts to in-flow (not fixed) on desktop */
  .logo-row {
    position: static;
    justify-content: center;
    align-items: center;
    height: 74px;
    flex-shrink: 0;
    padding: 4px var(--pad) 0;
    border-bottom: 1px solid var(--rule);
  }

  .logo-text { font-size: 19px; }

  #logo-spacer { display: none; }

  .left-section {
    padding: 28px var(--pad) 30px;
    border-bottom: 1px solid var(--rule);
  }
  .left-section:last-of-type { border-bottom: none; }

  /* Flex spacer pushes clock to bottom */
  .flex-spacer {
    display: block;
    flex: 1;
  }

  #clock {
    display: block;
    padding: 0 var(--pad) 20px var(--pad);
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--green);
  }

  /* ── Centre column ── */
  .col-centre {
    grid-column: 2;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #252525 transparent;
  }
  .col-centre::-webkit-scrollbar       { width: 3px; }
  .col-centre::-webkit-scrollbar-thumb { background: #252525; }

  .portfolio-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    height: 74px;
    padding: 0 28px;
    background: var(--bg);
    z-index: 10;
  }

  .project { padding: 40px 28px; }

  .slides-viewport { height: clamp(400px, 52vh, 640px); }

  .arrow-btn { width: 52px; font-size: 24px; }

  /* ── Right column ── */
  .col-right {
    grid-column: 3;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    border-left: 1px solid var(--rule);
    padding: 0;
  }
  .col-right::-webkit-scrollbar { display: none; }

  .right-section {
    margin: 0;
    padding: 28px var(--pad);
    border-bottom: 1px solid var(--rule);
  }
  .right-section:last-child { border-bottom: 1px solid var(--rule); padding-bottom: 38px; }

  /* ── Hide mobile-only elements ── */
  #mobile-clock,
  #mobile-clock-spacer { display: none; }

  .feed-footer { height: 40px; }

  /* Email no longer needs to break-all on wider screens */
  .contact-row a,
  .contact-row span { word-break: normal; }

  .desk-break { display: block; }
  .section-heading { font-size: 19px; margin-bottom: 18px; }
  .portfolio-header .section-heading,
  .right-header .section-heading { margin-top: 1px; }

  .right-header {
    display: flex;
    align-items: center;
    height: 74px;
    padding: 4px var(--pad) 0;
    flex-shrink: 0;
  }
  .right-header .section-heading { margin-bottom: 0; }
  #edu-section { padding-top: 4px; }
}

/* ════════════════════════════════════════
   LARGE DESKTOP  (≥ 1280px)
════════════════════════════════════════ */
@media (min-width: 1280px) {
  :root {
    --col-width: 280px;
    --pad:       32px;
  }

  .logo-text { font-size: 19px; }

  .slides-viewport { height: clamp(440px, 54vh, 660px); }

  #clock { font-size: 19px; }
}

/* ════════════════════════════════════════
   WIDE DESKTOP  (≥ 1600px)
════════════════════════════════════════ */
@media (min-width: 1600px) {
  :root {
    --col-width: 320px;
    --pad:       36px;
  }

  body { font-size: 15px; }

  .logo-text { font-size: 19px; }

  .slides-viewport { height: clamp(480px, 56vh, 700px); }
}