/*TESTING REAS Cargo FONT (changed in 4 places) Note the HTML file is pulling in the Garamond font from Google! */
@font-face {
  font-family: 'Cargo-DiatypePlusVariable';
  src: url('./files/fonts/Cargo-DiatypePlusVariable.woff2') format('woff2');
}




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

:root {
  --sidebar-w: 260px;
  --bg: #f5f3ee; /* original warmer bg colour */
  /* --bg: #f4f4f3; A cooler white colour bg like Lilith Anne's site*/
  --fg: #111;
  --muted: #888;
  /*or try
  pastel light grayish blue - rgb(200, 212, 212)
  pastel lilac rgb(212, 200, 200)
  pastel light green rgb(208, 212, 200)
  */
  /* --accent: #c00; */
  --accent: #c44e0c;

   --border: #d0cdc6;
  --link: #000000;
  /* --link-visited: #0000ee; */
  
  /*TESTING REAS Cargo FONT: below are what I had - EB Garamond etc. (changed in 4 places)*/
  /* --font-body: 'EB Garamond', Georgia, serif; */
  --font-body: 'Cargo-DiatypePlusVariable';
  --font-mono: 'Space Mono', monospace;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  
  /*TESTING REAS Cargo FONT: added font-weight for REAS like thinner body text if using his font (changed in 4 places)*/
  font-weight: 350;
  line-height: 1.6;
}

a { color: var(--link); text-decoration: none; }
/* a:hover { font-style: italic; text-decoration: none; } */
/* a:visited { color: var(--link-visited); } */
a:visited:hover { font-style: italic; }







/* ── layout ── */
#shell {
  display:flex;  
  min-height: 100vh;

}

/* ── sidebar ── */
#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  /*Thin gray border on the sidebar, separating the sidebar from the main content*/
  /* border-right: 1px solid var(--border); */
  background: var(--bg);
  padding: 2rem 1.5rem 3rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;

  
}

#sidebar h1 {
/*TESTING REAS Cargo FONT (changed in 4 places)*/
  /* font-family: var(--font-body); */
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0;
  /* text-transform: uppercase; */
  margin-bottom: 1.5rem;
  line-height: 1.3;

}

#sidebar h1 a { color: var(--fg); }

.sidebar-section {
  margin-bottom: 1.4rem;
}

.sidebar-section-label {
  font-family: var(--font-mono);
  /*IF I WANT TO CHANGE THIS: This is the font size for the sidebar 'page categories'*/
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .4rem;
  display: block;
}

.sidebar-section ol {
  list-style: none;
  padding: 0;
}

.sidebar-section ol li {
  margin-bottom: .18rem;
}

.sidebar-section ol li a {
  color: var(--fg);
  font-family: var(--font-mono);
  /*IF I WANT TO CHANGE THIS: This is the font size for the sidebar 'pages'*/
  font-size: 11px;
  line-height: 1.45;
  display: block;
  padding: 1px 0;
  transition: color .15s;
}

.sidebar-section ol li a:hover,
.sidebar-section ol li a.active {
  color: var(--accent);
  text-decoration: none; 
}

/* .sidebar-section ol li a:visited { color: var(--link-visited); } */

/* .sidebar-section ol li a.active {
  font-style: italic;
  color: var(--fg);
  text-decoration: none;
} */

.sidebar-info-link {
  display: block;
  font-family: var(--font-mono);
    /*IF I WANT TO CHANGE THIS: This is the font size for the sidebar 'EN / FI link'*/
  font-size: 11px;
  margin-bottom: 1.2rem;
  color: var(--fg);
}

.sidebar-social {
  /* display: flex; */
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .4rem;
  /* display: block; */
  /* gap: .6rem;
  margin-top: 1.5rem;
  font-size: 13px; */
  /* font-family: var(--font-mono); */
}

/* ── main content ── */
#main {
  flex: 1;
  padding: 0;
  /* max-width: 100%; */
   /* padding: 2.5rem 3rem 4rem; */
}

#main h2 {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 0.5rem;
  line-height: 1.3;
  /* padding: 1.7rem 2rem 0rem 2rem; */
  padding: 1.7rem 0 0 0;
  color: var(--fg);

}

 



/* ── content panels ── */
.panel { display: none; animation: fadein .25s ease;}
.panel.active { display: block; }


@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── recent / home ── */

.recent-intro {
  font-size: 17px;
  /*Changed as looked too big after changing to Reas Cargo font*/
  /* font-size: 1rem; */
  /*Changed just the h2 heading to use EB Garamond in both HTML files, because liking the ampersand curls.*/
  line-height: 1.7;
  max-width: 640px;
  /* padding: 1rem 2rem 1rem; */
  margin-bottom: 2rem;
}

.recent-intro strong {
  font-weight: 500;
}

.image-grid {
  display: flex;
  flex-direction: column;
  max-width: 1000px;
}

.image-grid figure {
  cursor: zoom-in;
  overflow: hidden;
  background: var(--border);
  position: relative;
  max-width: 1000px;
  /* width: 100%; */
  /* no fixed aspect-ratio — let height be natural, like the original */
}

.image-grid figure img {
  width: 100%;
  display: block;
  transition: opacity .25s ease;
  opacity: .95;
}

.image-grid figure:hover img {
  opacity: 1;
}

.image-grid figure figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 5px 7px;
  opacity: 0;
  transition: opacity .2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-grid figure:hover figcaption { opacity: 1; }

/* placeholder image blocks */
.img-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

/* ── image caption ── */
.img-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 5px;
  margin-bottom: 1.8rem;
  display: block;
  padding: 0 1rem;
}

/* ── 2-up and 4-up image grids ── */
.img-grid-2,
.img-grid-4 {
  display: grid;
  gap: 6px;
  margin-bottom: 0;
  width: 100%;
}
.img-grid-2 { grid-template-columns: 1fr 1fr; }
.img-grid-4 { grid-template-columns: 1fr 1fr; }

.img-grid-2 .grid-cell,
.img-grid-4 .grid-cell {
  cursor: zoom-in;
  overflow: hidden;
  background: var(--border);
  position: relative;
  aspect-ratio: 16/9;
  width: 100%;
}

.img-grid-2 .grid-cell img,
.img-grid-4 .grid-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.img-grid-2 .grid-cell figcaption,
.img-grid-4 .grid-cell figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 5px 7px;
  opacity: 0;
  transition: opacity .2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.img-grid-2 .grid-cell:hover figcaption,
.img-grid-4 .grid-cell:hover figcaption { opacity: 1; }

.img-grid-2 .grid-cell .img-placeholder,
.img-grid-4 .grid-cell .img-placeholder {
  aspect-ratio: 16/9;
  margin-bottom: 0;
}

/* ── video placeholder ── */
.video-block {
  width: 100%;
  margin-bottom: 0;
  cursor: pointer;
  position: relative;
}

.video-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: #111;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #aaa;
  font-family: var(--font-mono);
  font-size: 11px;
}

.video-play-btn {
  width: 52px;
  height: 52px;
  border: 2px solid #666;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s;
}

.video-block:hover .video-play-btn { border-color: #fff; }
.video-block:hover .video-play-btn svg { fill: #fff; }

.video-play-btn svg {
  width: 20px;
  height: 20px;
  fill: #888;
  margin-left: 3px;
  transition: fill .2s;
}

/* ── auto-rotating gallery slideshow ── */
.gallery-slideshow {
  max-width: 1000px;
  margin-bottom: 1.8rem;
  position: relative;
  /*This overflow line was the thing that made the new slideshow display over the sidebar error */
  overflow:hidden;
}

.slideshow-track {
  display: flex;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

.slideshow-slide {
  flex-shrink: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--border);
}

.slideshow-slide img {
  width: 100%;
  display: block;
  opacity: .95;
  transition: opacity .25s ease;
}

.slideshow-slide:hover img {
  opacity: 1;
}

.slideshow-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 5px 7px;
  opacity: 0;
  transition: opacity .2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.slideshow-slide:hover .slideshow-caption {
  opacity: 1;
}

.slideshow-caption-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

.slideshow-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  margin-bottom: 5px;
  padding: 0 1rem;
  /* animation: fadeInControls 0.8s ease-in-out infinite alternate; */
}

@keyframes fadeInControls {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

.slideshow-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
  padding: 0;
  line-height: 1;
  transition: color .15s;
  user-select: none;
}

.slideshow-btn:hover {
  color: var(--fg);
}

.slideshow-counter {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

/* ── image slider ── */
.img-slider {
  max-width: 1000px;
  /* width: 100%; */
  position: relative;
  margin-bottom: 0;
  overflow: hidden;
}

.slider-track {
  display: flex;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

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

.slider-track .slide .img-placeholder {
  margin-bottom: 0;
}

.slider-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  margin-bottom: 5px;
  padding: 0 1rem;
}

.slider-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
  padding: 0;
  line-height: 1;
  transition: color .15s;
}

.slider-btn:hover { color: var(--fg); }

.slider-counter {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

.slider-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  min-height: 1.5em;
}


/*USE IF NECESSARY: This is to set a less bolded font-weight for the html <strong> element ie all the job headings on the directing page and similar*/
/* strong {
    font-weight: 550;
} */




/* ── work detail panel ── */
/*This determines the TEMPLATE etc sections' width */

.work-detail {
  max-width: 1000px;
  /* max-width: 100wh; */
  /* max-width: 680px; */
  /*Padding on sides of image grid images*/
  /* padding: 0 2.5rem; */

}

.work-detail p {
  /*Modified 'page' texts' width to 800, was narrower like the Info / About and home pages. */
  max-width: 800px;
  /* max-width: 100wh; */
  /* max-width: 680px; */
  /*Padding on sides of image grid images*/
  /* padding: 0 2.5rem; */

}

.work-detail h3 {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: .4rem;
  line-height: 1.25;
}

.work-detail .work-year {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 1.2rem;
}

.work-detail .work-desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--fg);
  margin-bottom: 1.5rem;
}

.work-image-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /*uncommenting this is interesting sideways scroll*/
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.work-image-strip .strip-item {
  /* width: 180px;
  height: 130px; */
  width:100%;
  aspect-ratio: 16/9;
  background: var(--border);
  border-radius: 0;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.strip-item span {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  padding: 10px;
}

/* ── info panel ── */
.info-text {
  /*Info / About page text width */
  max-width: 800px;
  /* max-width: 580px; */
  /* font-family: var(--font-body); */
  /*Changed this because it was a different size to the other paragraph text - noticed when changing to the Reas Cargo font*/
  /* font-size: 1.05rem;
  line-height: 1.8; */
  font-size: 17px;
  line-height: 1.6;
  /* padding: 0 2.5rem 4rem; */
}

.info-text p { margin-bottom: 1.1rem; }

.info-text a {
  /*commented out because this created a light gray border on the Info page hyperlinks and Lilith images (bec they were also links) */
  /* border-bottom: 1px solid var(--border); */
}


.red-text-links a {
  color:#c44e0c;
}


.info-text a:hover {
  font-style: italic;
  border-bottom-color: var(--fg);
  text-decoration: none;
}

/* ── hamburger toggle ── */
#menu-toggle {
  display: none;
  position: fixed;
  top: 1rem;
  /* left: 1rem; */
  right: 1rem;
  z-index: 200;
  background: var(--bg);
  border: 1px solid var(--border);
  width: 36px;
  height: 36px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  border-radius: 2px;
}

#menu-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--fg);
  transition: transform .2s;
}




@media (max-width: 700px) {
  #menu-toggle { display: flex; }
  #sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 3px 0 16px rgba(0,0,0,.08);
  }
  #sidebar.open { transform: translateX(0); }
  
  /* #main h2 { padding: 2rem 1.4rem 0;} With this original setting, the h2 subheadings had an odd indentation in mobile view - changed it to the below setting */
  #main h2 { padding: 1.7rem 0 0 0;}
  
  .recent-intro { padding: 0 1.4rem; }
  #panel-home h2 {padding-left: 1rem;}
   /* With this original setting, the 'Research, Startups...' home page top heading (id="panel-home") wasn't lined up with the p text, but too much to left in mobile view. */
   
  .img-caption { padding: 0 1.4rem; }
  .slider-controls { padding: 0 1.4rem; }
  .work-detail { padding: 0 1.4rem; }
  .back-btn { padding: 0 1.4rem; margin-left: 1rem;}
  .info-text { padding: 0 1.4rem 3rem; }
  
  .mobile_view_margin_left{
  margin-left: 20px;  
  }

}



/* hide scrollbars everywhere while keeping scroll functional */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

.back-btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 1.5rem;
  margin-top: 2.5rem; 
  /* margin-left: 1rem; */
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  letter-spacing: .04em;
}
.back-btn:hover { color: var(--fg); }

/* ── lightbox overlay ── */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(255, 255, 255, 0.97);
  cursor: zoom-out;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#lightbox.open {
  display: flex;
  animation: lb-in .2s ease;
}

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

#lightbox-inner {
  position: relative;
  max-width: 88vw;
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#lightbox-content {
  display: flex;
  align-items: center;
  justify-content: center;
  /*Changed width and height for bigger lightbox pop up image BUT this original change also caused mobile view lightbox pop ups to be taller than expected, like 3 images high - only in mobile view I think. Replacing the hard coded figures with aspect-ratio:16/9; works for the main page and the RESEARCH SECTION PAGES in both views, but not for the rest of the 'pages' TECHNICAL WRITING ONWARDS  */
  /* width: min(80vw, 700px);
  height: min(72vh, 520px); */
  aspect-ratio: 16/9;
  /* width: 90vw;  */
  /* Use 90% of the viewport width */
  /* height: 85vh;  */
  /* Use 85% of the viewport height */
  border-radius: 2px;
  overflow: hidden;
  background: var(--border);
  animation: lb-scale .22s cubic-bezier(.2, .8, .4, 1);
}

@keyframes lb-scale {
  from { transform: scale(.93); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

#lightbox-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .04em;
}

#lightbox-caption {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .04em;
  text-align: center;
}

#lightbox-close {
  position: fixed;
  top: 1.2rem;
  right: 1.4rem;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: .06em;
  padding: 4px 0;
  z-index: 501;
}

#lightbox-close:hover { color: var(--fg); }

/* prev / next arrows */
#lightbox-prev,
#lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--muted);
  padding: 1rem;
  z-index: 501;
  transition: color .15s;
  user-select: none;
}

#lightbox-prev { left: 0; }
#lightbox-next { right: 0; }
#lightbox-prev:hover,
#lightbox-next:hover { color: var(--fg); }

/* make grid thumbnails show zoom cursor */
.image-grid figure { cursor: zoom-in; }

/* make strip items clickable */
.work-image-strip .strip-item { cursor: zoom-in; }

/* prev / next arrows - created this for some reason, but disabling it later solved the problem of the slideshow/lightbox prev and next arrows sliding on top of the image at sizes larger than the @media breaking point. Hmm.  */

/*
@media (min-width: 1350px) {
  #lightbox-prev { left: 8em; }
  #lightbox-next { right: 8em; }
}

*/

@media (max-width: 700px){
  #p5_animations { width:100%; object-fit: contain; }
}

/*This media query was to fix the slider/lightbox nav buttons being too close to the slide image in moobile view, IF I WANT TO CHANGE IT BACK*/
@media (max-width: 700px) {
  #lightbox-prev,
  #lightbox-next {
    position: fixed;
    top: auto;
    bottom: 10rem;
    transform: none;
  }
  #lightbox-prev { left: 2rem; }
  #lightbox-next { right: 2rem; }
}


      /* Image grid styling from CV html file - client logos */
      .image-grid-2 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
        margin: 1rem 0;
        /* margin-left: 20px; */
        margin-bottom: 1.5rem;
        overflow: hidden;
        
      }

      @media (max-width: 700px){
  .image-grid-2 { margin-left: 20px;}
}

      .image-grid-item-2 {
        aspect-ratio: 3/1;
        background: #f0f0f0;
        /* border: 1px solid #ddd; */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        color: #999;
        min-width: 0;
      }

      .image-grid-item-2 img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        /* padding: 0.25rem; */
      }
      
      
  /*IF I WANT TO CENTRE THE WHOLE PAGE AT LARGER SCREEN SIZES, SEE SHELL ID ABOBE, STILL WANT TO FIND OUT HWO TO ENLARGEN EVERYTHING - FONTS, IMAGES ETC - AS AN ALTERNATIVE*/
  @media (min-width: 1250px){
    #shell {max-width: 1500px; margin-inline: auto; }
}  

    /*IF I WANT TO CENTRE THE WHOLE PAGE AT LARGER SCREEN SIZES, SEE SHELL @MEDIA QUERY BELOW, STILL WANT TO FIND OUT HWO TO ENLARGEN EVERYTHING - FONTS, IMAGES ETC - AS AN ALTERNATIVE*/
  @media (min-width: 1450px){
    #shell {width:fit-content; }
}