/* ───────────────────────────────────────────────────────────
       RESET & GLOBALS
    ─────────────────────────────────────────────────────────── */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html, body            {
      height: 100%; 
      overflow: hidden; 
      font-family: 'Roboto Mono', monospace;
      overflow-x: hidden;       /* hides accidental overflow */
  word-break: break-word;   /* older browsers */
  overflow-wrap: anywhere; 
    
    }

    .entry-row{
  display: flex;
  flex-wrap: wrap;          /* drop to the next line if needed */
  gap: 0.25rem;
}
.entry-row span{
  margin-right: 0.25rem;    /* visual space after “Role:” etc. */
}
    
    :root {                               /* central variables */
      --menu-height  : 3.5rem;
      --filter-height: 4rem;
      --gap          : 2.5rem;
      --brand-blue   : #0066ff;

        /* how much space above the 1st row */
        --carousel-space-top: 5vh;         
        /* space between the two rows */
        --carousel-space-between: 5vh;    
        /* space below the 2nd row */
        --carousel-space-bottom: 5vh;
          --carousel-row-height: calc(
        (100vh 
        - var(--carousel-space-top) 
        - var(--carousel-space-between) 
        - var(--carousel-space-bottom)
        ) / 2
    );     
    }

    /* ───────────────────────────────────────────────────────────
       NUMBERED TOP MENU
    ─────────────────────────────────────────────────────────── */
    header {
      position: fixed; top: 0; left: 0; width: 100%;
      height: var(--menu-height);
      display: flex; align-items: center; justify-content: center;
      /* background-color: #e0e0e0; */
      /* filter:grayscale(100%); */
      /* backdrop-filter: blur(10px);   */
      z-index: 1200;
    }
    .main-menu ul {
      list-style: none;
      display: flex; gap: var(--gap);
      
      padding-inline: 1rem;
      font-weight: 300;
    }
    .main-menu li   { position: relative; }
    .main-menu li:not(:last-child)::after {                /* vertical bar */
      content: ''; position: absolute; right: calc(var(--gap)/-2);
      top: 8%; height: 84%; width: 1px; background: #2e2e2e;
    }

    .main-menu a {
      text-decoration: none; color: #000000;
      font-weight:100;
      font-size: 1.2rem; font-weight:lighter; letter-spacing: .03em;
      display: inline-flex; gap: .4rem; align-items: center;
      transition: color .2s ease;
    }
    .main-menu a:hover,
    .main-menu a:focus,
    .main-menu a.active      { color:rgb(0, 0, 0);  font-weight:900; }

    .num {                   /* numeric prefix */
      font-family: 'Roboto Mono', monospace;
      opacity: .5; font-size: 1.2rem;
    }

    /* ───────────────────────────────────────────────────────────
       HERO BACKGROUND
    ─────────────────────────────────────────────────────────── */
    .hero {
      position: fixed; inset: 0;
      background: url('../../images/concrete2.jpg') center/cover no-repeat;
      opacity:15%;
      transform: scale(1.07);
      animation: zoomOut 4s ease-out forwards;
      z-index: -2;
    }
    @keyframes zoomOut { to { transform: scale(1); } }

    /* ───────────────────────────────────────────────────────────
       FILTER BAR (buttons)
    ─────────────────────────────────────────────────────────── */
    .filters {
    font-family: 'Roboto Mono', monospace;
    position: fixed;
    top: calc(var(--menu-height) + 5%); left: 50%; transform: translateX(-50%);
    height: var(--filter-height);
    width: 100%; max-width: 90vw;
    display: flex; flex-wrap: wrap; justify-content: center;
    /* gap: .75rem; padding: .5rem 1rem; */
    z-index: 1100;

    gap: 1.5rem;
    padding: 1rem 0;
    }

    .filters button {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 400;
    color: #000;
    cursor: pointer;
    }

    .filters button:hover {
    color:inherit;
    }

    .filters button.active {
    font-weight: 800;           /* bold */
    text-decoration: underline; /* underline */
    }
    @media (max-width: 600px) {
      .filters      { gap: .5rem; padding: .4rem .8rem; top: calc(var(--menu-height) + 1.5rem); }
      .filters button { padding: .4rem .8rem; font-size: .9rem; }
    }

    /* ───────────────────────────────────────────────────────────
       HORIZONTAL CAROUSEL
    ─────────────────────────────────────────────────────────── */
    .carousel-container {
      position: absolute;
      top: calc(var(--menu-height) + var(--filter-height));
      left: 50%; transform: translateX(-50%);
      width: 100vw;
      height: calc(100vh - var(--menu-height) - var(--filter-height));
      display: flex; align-items: center; justify-content: center;
    }
    .arrow {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 2rem; height: 2rem; border-radius: 50%;
      background: rgba(226,226,226,.87);
      font-size: 1.5rem; display:flex; align-items:center; justify-content:center;
      cursor: pointer; user-select: none; z-index: 500;
      outline-offset:4px
    }
    .arrow.left  { left: 1rem; }
    .arrow.right { right: 1rem; }

    .arrow{outline-offset:4px}
    .arrow:focus-visible{outline:2px solid var(--brand-blue)}
    @media (prefers-reduced-motion:reduce){
    .bg-carousel .row{animation:none}
    }

    .carousel {
      flex: 1; display: flex; gap: 24px; padding: 2rem 5%;
      overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
    }
    .carousel::-webkit-scrollbar { display: none; }

    /* ───────────────────────────────────────────────────────────
       TILES
    ─────────────────────────────────────────────────────────── */
    .tile {
      flex: 0 0 300px; width: 300px; aspect-ratio: 2/3;
      position: relative; border-radius: 1rem; overflow: hidden;
      scroll-snap-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.3);
      cursor: pointer; display:block; text-decoration:none; color:inherit;

      opacity: 0; transform: translateY(20px);
      transition: opacity .6s ease-out, transform .6s ease-out;
    }
    .tile.show   { opacity: 1; transform: translateY(0); }
    .tile.hidden { display: none; }

    /* Default gray overlay removed on hover */
    .tile img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform .5s ease, filter .5s ease;
      filter: grayscale(60%) brightness(90%);
    }
    .tile:hover img {
      transform: scale(1.1); filter: grayscale(0%) brightness(100%);
    }

    .info {
      position: absolute; inset-block-end: 0; inset-inline-start: 0;
      width: 100%; padding: 1rem;
      background: linear-gradient(0deg, rgba(0,0,0,.6), transparent);
      color: #fff;
    }
    .category {
      font-size: .75rem; text-transform: uppercase;
      opacity: .9; letter-spacing: .05em; margin-block-end: .25rem;
    }
    .title { font-size: 1.1rem; font-weight: 600; line-height: 1.3; }



  
    /* Background carousel wrapper sits behind everything */
.hero {
  /* ... */
  z-index: -2;    /* send hero back */
}




/* keyframes stay unchanged */
@keyframes scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* shrink-and-fade tiles remains the same */
.bg-carousel .tile {
  flex: 0 0 200px;
  opacity: 0.2;
  box-shadow: none;
}
.bg-carousel .tile img {
  filter: grayscale(100%) brightness(80%);
  transform: scale(1) !important;
}


:root {
  /* how much space above the 1st row */
  --carousel-space-top: 5vh;         
  /* space between the two rows */
  --carousel-space-between: 5vh;    
  /* space below the 2nd row */
  --carousel-space-bottom: 5vh;      

  /*
    Now compute “each row’s height” as:
      total viewport height
    – (top + between + bottom)
    all divided by 2
  */
  --carousel-row-height: calc(
    (100vh 
     - var(--carousel-space-top) 
     - var(--carousel-space-between) 
     - var(--carousel-space-bottom)
    ) / 2
  );
}

.bg-carousel {
  position: fixed;
  inset: 0;               /* fill the viewport */
  overflow: hidden;
  z-index: -1;
}



/* Each row is a long inline-flex strip */
.bg-carousel .row {
  position: absolute;
  left: 0;                /* span full width */
  width: 200%;            /* enough width for the “double” tiles */
  display: inline-flex;
  gap: 2rem;
  align-items: center;
}

/* Position the two rows */
.bg-carousel .row1 {
  top: var(--carousel-space-top);
  height: var(--carousel-row-height);
  animation: scroll-right 60s linear infinite;
}

/* second row sits below the first + the “between” gap */
.bg-carousel .row2 {
  top: calc(
    var(--carousel-space-top)
    + var(--carousel-row-height)
    + var(--carousel-space-between)
  );
  height: var(--carousel-row-height);
  animation: scroll-left 60s linear infinite;
}



/* keyframes stay unchanged */
@keyframes scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* shrink-and-fade tiles remains the same */
.bg-carousel .tile {
  flex: 0 0 200px;
  opacity: 0.2;
  box-shadow: none;
}
.bg-carousel .tile img {
  filter: grayscale(70%) brightness(80%);
  transform: scale(1) !important;
  opacity: 70%;
}


/* headline container (unchanged) */
.typing-wrapper {
  position: fixed;
  top: 45%; left: 50%; transform: translate(-50%, -50%);
  font-family: 'Roboto Mono', monospace;
    -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #2c2c2c;
  font-size: clamp(2rem, 4vw + 1rem, 4rem);
  font-weight: 700;
  color: rgb(70, 70, 70);
  text-align: center;
  z-index: 2000;
  pointer-events: none;
}

/* ─── SELF-TYPING HEADLINE ───────────────────────────────────── */

/* Fixed-width box that keeps the layout steady.
   We now centre whatever sits inside it.           */
.typed-box{
  display:inline-flex;
  justify-content:center;   /* NEW → text + cursor centred */
  align-items:center;
  width:var(--typed-box-width,24ch);   /* set by JS just once */
  max-width:90vw;            /* never spill on narrow phones */
  white-space:nowrap;
}

/* No change needed to .typed-text or .cursor */

/* Phone tweak: bump headline a little higher and shrink font */
@media (max-width:600px){
  .typing-wrapper{
    top:45%;
    font-size:clamp(1rem,8vw + .5rem,2.8rem);
  }

  .typed-box{
    /* keep it centred but let the text wrap */
    white-space:normal;          /* override the nowrap */
  }

  /* make sure the flex item is allowed to shrink */
  .typed-text{
    min-width:0;
    white-space:normal;          /* text may flow onto a 2nd line */
    overflow-wrap:anywhere;      /* emergency break if a single word is too long */
  }
  

}

/* inner span just holds the changing letters */
.typed-text {
  display: inline-block;
  text-align: center;
  width:clamp(10ch, var(--typed-box-width,24ch), 90vw);
}

/* cursor now lives inside .typed-box, next to the text */
.cursor {
  border-left: 3px solid #000;
  margin-left: .2rem;
  animation: blink .8s steps(2) infinite;
}

@keyframes blink { 0%,49% {opacity:1;} 50%,100% {opacity:0;} }


/* --- Burger button styles --- */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2200;
}
.burger span {
  display: block;
  height: 3px;
  width: 28px;
  background: #222;
  border-radius: 2px;
  transition: all 0.3s;
}

/* --- Mobile nav: show burger, hide menu --- */
@media (max-width: 800px) {
  .burger { display: flex; z-index: 2200; }

  .main-menu {
    display: flex;               /* ← YOU MISSED THIS */
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: #fff;
    flex-direction: column;
    justify-content: center;     /* centres the <ul> vertically */
    align-items: center;         /* …and horizontally */
    transform: translateX(-100%);
    transition: transform 0.3s;
    z-index: 2100;
    height: 100vh;
    width: 100vw;
    opacity: 0;
    pointer-events: none;
  }

  .main-menu.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .main-menu ul {
    display: flex;               /* ← AND THIS */
    flex-direction: column;
    gap: 2.5rem;
    font-size: 2rem;
    align-items: flex-start;     /* left-align links; use center if you prefer */
  }

  /* remove the divider */
  .main-menu li::after{
    content: none !important;
    display: none !important;
    width: 0 !important; height: 0 !important; background: none !important;
  }

  header { position: relative; z-index: 3000; }
}


/* Animate burger when open */
.burger.open span:nth-child(1) {
  transform: rotate(45deg) translateY(9px);
}
.burger.open span:nth-child(2) {
  opacity: 0;
}
.burger.open span:nth-child(3) {
  transform: rotate(-45deg) translateY(-9px);
}

    .about-section{
      position:relative;
      z-index:100;                     /* sits above the fixed hero */
      display:flex;
      flex-direction:column;
      align-items:center;
      padding-top:calc(var(--menu-height) + 8vh);
      padding-inline:5vw;
      max-width:1000px;
      margin:0 auto 8vh;
      gap:3rem;
      color:#1a1a1a;
      text-align:center;
    }
    .about-content{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:2rem;
    }
    @media(min-width:768px){
      .about-content{
        flex-direction:row;
        text-align:left;
      }
    }

    /*––– PROFILE PIC — now matches .tile size (300×450, 2/3) –––*/
    .profile-pic{
      width:300px;            /* same 300‑px width as .tile */
      aspect-ratio:2/3;       /* matches .tile aspect‑ratio */
      object-fit:cover;
      border-radius:1rem;     /* keeps visual consistency with tiles */
      box-shadow:0 8px 24px rgba(0,0,0,.75);
      flex-shrink:0;
    }

    @media (max-width:480px){
  .profile-pic{ width:220px; }
}
    .about-text{
      font-family:'Roboto Mono', monospace;
      font-size:1rem;
      line-height:1.7;
      max-width:600px;
    }


.cv-container{
     max-width: 960px;
     margin: 0 auto;
     padding: 2rem 1.2rem;
     text-align: left;
   }
   .cv-section{
     margin-bottom: 3rem;
   }
   .cv-section h2{
     font-weight: 600;
     margin-bottom: 1rem;
   }
   .entry{
     margin-bottom: 1.5rem;
   }
   .entry .years{
     font-weight: 700;
   }
   .entry-row{
     display:block;
   }
   .entry-row span{
     font-weight: 600;
   }


    .downloadcv-link{
      display:flex;
      align-items:center;
      gap:.75rem;
      font-weight:600;
      text-decoration:underline;
      color:#1a1a1a;

    }

 /* Social icon row */
    .social-links{
      display:flex;
      gap:1.5rem;
      margin-top:1.5rem;
      justify-content:center;
    }
    .social-links a{
      font-size:2rem;
      color:#000;
      transition:color .2s ease;
    }
    .social-links a:hover,
    .social-links a:focus{
      color:var(--brand-blue);
    }

 .work-section{
      display:flex;
      flex-direction:column;
      align-items:center;
      padding-top:calc(var(--menu-height) + 8vh);
      padding-inline:5vw;
      gap:clamp(2rem,6vw,3rem);
      color:#1a1a1a;
      text-align:center;          /* centre the big title only */
    }

    .work-title{
      font-size:clamp(2rem,6vw,3rem);
      font-weight:700;
      line-height:1.2;
    }

    .work-wrapper{
      /* Shared width applied to BOTH prose and imagery */
      max-width:70ch;             /* ≈ 700–750 px on large screens */
      width:100%;
      display:flex;
      flex-direction:column;
      gap:clamp(1.5rem,4vw,2rem);
      margin-inline:auto;
      text-align:left;            /* normal left‑aligned body text */
    }
    .work-wrapper img{
      width:100%;                 /* match text column */
      object-fit:cover;
      cursor:pointer;             /* indicate click‑to‑zoom */
    }

    /* —— Email call‑to‑action ———————————————————— */
    .contact-cta{
      display:flex;
      justify-content:center;
      margin-top:clamp(2rem,5vw,3rem);
      margin-bottom:clamp(4rem,10vh,6rem); /* extra breathing room */
    }
    .email-link{
      display:flex;
      align-items:center;
      gap:.75rem;
      font-weight:600;
      text-decoration:none;
      color:#1a1a1a;
    }
    .email-link svg{
      width:1.5rem;
      height:1.5rem;
      fill:currentColor;
    }

    /* —— Full‑screen image modal ——————————————— */
    .img-modal{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,0.85);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:2rem;
      z-index:3000;                /* above header/menu */
    }
    .img-modal[hidden]{display:none;}
    .img-modal img{
      max-width:90vw;
      max-height:90vh;
      object-fit:contain;
    }
    .img-modal .close{
      position:absolute;
      top:1rem;
      right:1rem;
      background:transparent;
      border:none!important;      /* remove default button border */
      outline:none!important;     /* suppress outline — ensure visible focus style elsewhere if needed */
      font-size:3rem;
      line-height:1;
      color:#fff;
      cursor:pointer;
      padding:1rem;               /* generous hit‑area */
      z-index:3100;               /* sits above modal content */
      pointer-events:auto;        /* explicitly clickable */
    }


    /* YouTube embed matches .work-wrapper width */
.work-wrapper .video-embed { width: 100%; }
.work-wrapper .video-embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;   /* modern browsers */
  border: 0;
  display: block;
}
.work-wrapper .video-embed figcaption {
  font-size: .9rem;
  opacity: .8;
  margin-top: .5rem;
  text-align: center;
}


.visually-hidden{
  position:absolute!important;
  clip:rect(1px,1px,1px,1px);
  padding:0;border:0;height:1px;width:1px;
  overflow:hidden !important;
  white-space:nowrap;
}