/* ===============================================================
   Global Reset & Base Elements
   =============================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope.woff2') format('woff2');
  font-weight: 300 800; /* supports a full weight range */
  font-display: swap;
}

:root {
  --font-main: 'Manrope', sans-serif;
}

body {
    font-family: var(--font-main);
    font-weight: 550;
    font-size: 16px;
    letter-spacing: 0.015em;
    line-height: 1.5em;
    color: #666;
    background: #efefef;
    text-align: justify;
}

strong, b {
    font-weight: 800;
}

h1 {
  font-size: 37px;
  letter-spacing: 0.02em;
  line-height: 1.3em;
  color: #000000;
}

h2 {
  font-size: 18px;
  letter-spacing: 0em;
  line-height: 1.4em;
  margin-bottom: 0.75rem;
  color: #444444;
}

/* Shared grid layout for timeline, media, and publication rows */
.timeline-row,
.media-row,
.pub-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 2rem;
    align-items: start;
    position: relative;
}

.timeline-row { margin-bottom: 3rem; }
.media-row { margin-bottom: 2.5rem; }
.pub-row { margin-bottom: 3rem; }

.timeline-year {
    font: 500 1.5rem/1 var(--font-main);
    color: #333;
    padding-top: .25rem;
}

.timeline-entries {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.logo-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-top: 2.4rem;
    margin-top: 1.6rem;
    margin-bottom: 0;
}

.logo-box {
    flex: 0 0 140px;
}

.logo-box img {
    max-height: 60px;
    width: auto;
    object-fit: contain;
}

a {
    color: #333;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

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

/* Layout Helpers */
.wrap {
    width: 90%;
    max-width: none;
    margin: 0 auto;
}

/* ===============================================================
   Header & Navigation
   =============================================================== */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.75rem 0;
    z-index: 1000;
}

.site-header .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-title a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.site-nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.site-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 300;
    transition: opacity 0.2s ease;
}

.site-nav a:hover, .site-nav a.active {
    opacity: 0.7;
    font-weight: 400;
}

/* ===============================================================
   Hero Section (shared)
   =============================================================== */
.hero {
    position: relative;
    min-height: 60vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

/* overlay */
.hero-inner {
    position: relative;
    z-index: 1;
    padding: 0 1rem;
}

.hero-inner h1 {
    font-size: 3rem;
    font-weight: 600;
    color: #fff;
}

.hero-inner h2 {
    font-size: 2.5rem;
    font-weight: 550;
    max-width: 1200px;
    margin: auto;
    color: #eeeeee;
}
.hero-inner p {
  color: #eeeeee;
}

/* ===============================================================
   Generic Sections
   =============================================================== */
.section, .content {
    padding: 4rem 0;
}

/* About Section Split Layout */
#about {
    padding: 4rem 0;
}

#about .wrap {
    display: grid;
    grid-template-columns:1fr 2fr;
    gap: 3rem;
    align-items: start;
}

#about-left {
    font-size: 1rem;
    font-weight: 400;
    color: #333;
}

#about-right p {
    margin-bottom: 1.4rem;
    font-size: 1rem;
}


/* Year blocks (Tutorials / Media / Publications) */
.year-section {
    padding-top: 2rem;
    border-top: 1px solid #e0e0e0;
    margin-bottom: 2rem;
}

.year-section:first-of-type {
    border-top: none;
    padding-top: 0;
}

.year-section h2 {
    font-size: 1.9rem;
    font-weight: 400;
    color: #333;
    margin-bottom: 1.5rem;
}

/* ===============================================================
   Media Page
   =============================================================== */
.media-content a {
    color: #333;
    text-decoration: none;
    font-size: 1.05rem;
}

.media-content a:hover {
    text-decoration: underline;
}

/* ===============================================================
   Tutorial & Publication Lists
   =============================================================== */
.tutorial-title {
    margin-bottom: 0.8rem;
}

.pub-venue {
    display: block;
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 0.35rem;
}

/* ===============================================================
   Entrepreneurial Page
   =============================================================== */
.entre-content h3 {
    margin: 0 0 .4rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.entre-content h3 a {
    text-decoration: none;
}

.entre-content h3 a:hover {
    text-decoration: underline;
}

.timeline-entries p {
  position: relative;
  margin-bottom: 2.4rem; /* space after paragraph */
}

.timeline-entries h3 {
  margin-bottom: 1.6rem; /* space below the heading */
}

.tutorial-item {
  position: relative;
  padding-top: 2.4rem;
  margin-top: 1.6rem;
}

.tutorial-item + .tutorial-item::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background-color: #ccc;
}

/* Keep original behaviour everywhere **except** the publications page */
.timeline-row:not(.pub-row) + .timeline-row:not(.pub-row) .timeline-year {
    visibility: hidden;   /* other pages stay as they were */
}

/* Publications page override */
.pub-row .timeline-year {
    visibility: visible;  /* every publication row shows its year */
}

/* (optional but explicit) don’t re‑hide on successive pub rows */
.pub-row + .pub-row .timeline-year {
    visibility: visible;
}

/* ===============================================================
   Footer
   =============================================================== */
.site-footer {
    background: #efefef;
    color: #666;
    padding: 1.5rem 0;
    font-size: 0.9rem;
    margin-top: 2rem;
}

.footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
}

.social-icons a {
    margin-right: 1rem;
    display: inline-block;
}

.social-icons img {
    width: 24px;
    height: 24px;
    filter: grayscale(1);
    transition: filter 0.2s ease;
}

.social-icons a:hover img {
    filter: none;
}

/* ===============================================================
   Responsive Tweaks
   =============================================================== */
@media (max-width: 768px) {
    .hero-inner h1 {
        font-size: 2.2rem;
    }

    .hero-inner h2 {
        font-size: 1.8rem;
    }

    #about .wrap {
        grid-template-columns:1fr;
    }

    /* collapse about grid */
    .logo-item {
        flex-direction: column;
        text-align: center;
    }
}

.nav-toggle {               /* hide on desktop, show ≤640 px */
    display:none;
    background:none;
    border:0;
    padding:.5rem;
    margin-left:auto;        /* pushes it to the far right */
    cursor:pointer;
}


.pub-row .pub-venue {
    /* was 0.35rem – widen the gap below the venue line */
    margin-bottom: 0.75rem;
}

.pub-row h3 {
    /* was 1.6rem – widen the gap below the title */
    margin-bottom: 2.2rem;
}

.pub-row {
    /* 1. extra breathing‑room beneath each publication …            */
    margin-bottom: 3rem;             /* ↑‑‑ increase or decrease here */

    /* 2. establish a positioning context for the pseudo‑element     */
    position: relative;
}

.pub-row p {
    /* add more vertical space after every <p> in a publication */
    margin-bottom: 4rem;   /* tweak to taste – try 1.5rem or 2rem */
}

/* Remove the extra gap under the very last item (optional) */
.pub-row:last-child {
    margin-bottom: 0;
}

.pub-row:not(:first-child)::before {
    content: '';
    position: absolute;
    top: -1.5rem;
    left: calc(80px + 2rem);
    right: 0;
    height: 2px;
    background: #e0e0e0;
}

/* Entrepreneurial list – thin grey rule above every venture except the first */

/* thin grey rule above every venture except the first */
.logo-item + .logo-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ccc;
}

.timeline-entries .logo-item {
    align-items: flex-start;
}

/* ------- 2.1  Media row specific alignment ------- */
.media-row {
    align-items: flex-start;
}

/* remove gap below the very last year */
.media-row:last-child { margin-bottom: 0; }

/* ------- 2.2  Show the year and line it up with the first logo -- */
.media-row .timeline-year {
    visibility: visible !important;
    padding-top: 2.4rem;
}

/* ------- 2.3  Logo‑plus‑text card inside each year -------------- */
.timeline-entries .logo-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 2rem;

    padding-top: 2.4rem;
    margin-top: 0;
}

/* Horizontal rule above EVERY logo except the very first one
   (works across year boundaries too, thanks to .media-row::before) */
.timeline-entries .logo-item + .logo-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ccc;
}

/* ------- 2.4  Divider between different years ------------------- */
.media-row:not(:first-child)::before {
    content: "";
    position: absolute;
    top: -1.25rem;
    left: calc(80px + 2rem);
    right: 0;
    height: 1px;
    background: #ccc;
}

:root {
    --media-row-h: 150px;
}

.timeline-entries .logo-item {
    height: var(--media-row-h);
    overflow: hidden;
}

.timeline-entries .chai-item {
    height: 250px;
}

/* ===============================================================
   Mobile Navigation Fixes
   =============================================================== */
@media (max-width: 640px) {
    /* Keep existing rules */
    .nav-toggle { display: block; }
    .site-nav { display: none; }

    /* Fixed mobile nav dropdown */
    .site-header.nav-open .site-nav {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #ffffff;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        border-top: 1px solid #eee;
    }

    .site-nav ul {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    .site-nav a {
        display: block;
        padding: 1rem;
        border-bottom: 1px solid #f0f0f0;
        font-size: 1rem;
    }

    .site-nav a:hover {
        background: #f8f8f8;
    }

    /* Make header full width on mobile */
    .site-header .wrap {
        width: 100%;
        padding: 0 1rem;
    }

    /* Ensure title doesn't get cut off */
    .site-title {
        font-size: 0.9rem;
    }
}

/* ===============================================================
   Additional Mobile Optimizations
   =============================================================== */
@media (max-width: 640px) {
    /* Typography scaling */
    body {
        font-size: 14px;
        text-align: left; /* Remove justify on mobile */
    }

    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 16px;
    }

    /* Hero adjustments */
    .hero {
        min-height: 40vh;
    }

    .hero-inner h1 {
        font-size: 2rem;
    }

    .hero-inner h2 {
        font-size: 1.3rem;
        line-height: 1.4;
    }

    /* Content spacing */
    .section, .content, #about {
        padding: 2rem 0;
    }

    .wrap {
        width: 95%;
    }

    /* Timeline/Grid layouts - stack vertically */
    .timeline-row,
    .media-row,
    .pub-row {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .timeline-year {
        font-size: 1.2rem;
        border-bottom: 2px solid #e0e0e0;
        padding-bottom: 0.5rem;
        margin-bottom: 1rem;
        visibility: visible !important;
    }

    /* Fix pseudo-element lines for mobile */
    .pub-row:not(:first-child)::before,
    .media-row:not(:first-child)::before {
        left: 0;
        right: 0;
    }

    /* Logo items on mobile */
    .logo-item {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        margin-bottom: 2rem;
        height: auto !important; /* Override fixed height */
    }

    .logo-box {
        flex: 0 0 60px;
    }

    .logo-box img {
        max-height: 40px;
        margin: 0 auto;
    }

    /* Touch-friendly tap targets */
    a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Footer adjustments */
    .footer-columns {
        flex-direction: column;
        text-align: center;
    }

    .social-icons {
        justify-content: center;
        display: flex;
        gap: 1rem;
    }

    /* About section - already handled but ensure it works */
    #about .wrap {
        grid-template-columns: 1fr;
    }

    #about-left {
        font-weight: 600;
        margin-bottom: 1rem;
    }
}

/* Landscape mobile adjustments */
@media (max-width: 640px) and (orientation: landscape) {
    .hero {
        min-height: 70vh;
    }

    .site-header {
        padding: 0.5rem 0;
    }
}

/* ===============================================================
   MOBILE NAV – burger + dropdown (keeps desktop header transparent)
   =============================================================== */
.nav-toggle{
    display:none;
    background:none;
    border:0;
    padding:.5rem;
    margin-left:auto;
    cursor:pointer;
}
.nav-toggle svg{stroke:#fff;}   /* burger icon = white */

/* Collapse nav ≤640 px and show burger */
@media(max-width:640px){

  .nav-toggle{display:block;}     /* show burger */
    .nav-toggle{
    color:#fff;               /* makes any text inside the button white   */
}
  .site-nav{display:none;}        /* hide links */

  /* when JS adds .nav-open to header, reveal menu */
  .site-header.nav-open .site-nav{
      display:block;
      position:absolute;
      top:100%;
      left:0;
      right:0;
      background:#ffffff;
      box-shadow:0 4px 6px rgba(0,0,0,.1);
      border-top:1px solid #eee;
  }

  .site-nav ul{
      flex-direction:column;
      gap:0;
      margin:0;
      padding:0;
  }

  /* darker links inside dropdown */
  .site-header.nav-open .site-nav a{color:#333;}

  .site-nav a{
      display:block;
      padding:1rem;
      border-bottom:1px solid #f0f0f0;
      font-size:1rem;
  }
}