:root{
  --accent:#6aa9ff;
  --accent2:#12B8A6;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

body{
  background-color:var(--bg);
  color:var(--text);
}

html{
scroll-behavior:smooth;
}

/* ========================================= */
/* PROJECT NAVBAR */
/* ========================================= */

.project-navbar{

position:fixed;

top:0;
left:0;

width:100%;

height:68px;

display:flex;
align-items:center;

background:rgba(10,15,22,.7);

backdrop-filter:blur(14px);

border-bottom:1px solid rgba(255,255,255,.05);

z-index:1000;

transition:transform .35s ease;

}

/* hide state */

.project-navbar.nav-hidden{

transform:translateY(-100%);

}

.nav-inner{

max-width:1500px;

margin:auto;

width:100%;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 40px;

}

/* ========================================= */
/* LOGO */
/* ========================================= */

.nav-logo svg{

height:50px;

}

/* ========================================= */
/* PROJECT TITLE */
/* ========================================= */

.project-title{

font-family:"Space Grotesk",sans-serif;

font-size:15px;

color:#cfd6e6;

display:flex;

align-items:center;

gap:10px;

}

.project-title .divider{

color:#6aa9ff;

font-weight:600;

}

/* ========================================= */
/* GITHUB ICON */
/* ========================================= */

.github-link{

display:flex;

align-items:center;

justify-content:center;

width:36px;
height:36px;

border-radius:8px;

color:#9aa3b7;

transition:.2s;

}

.github-link svg{

width:20px;
height:20px;

}

.github-link:hover{

background:#141a25;

color:#ffffff;

}

.nav-left{

display:flex;
align-items:center;
gap:20px;

}

.home-link{

display:flex;
align-items:center;
justify-content:center;

width:34px;
height:34px;

color:#9aa3b7;

}

.home-link svg{

width:18px;
height:18px;

}

.logo-project{

display:flex;
align-items:center;
gap:12px;

}

.project-name{

font-family:"Space Grotesk",sans-serif;

font-size:15px;

color:#cfd6e6;

display:flex;
gap:6px;

}

.project-name .divider{

color:#6aa9ff;

}

/* ============================== */
/* BREADCRUMB NAV */
/* ============================== */

.breadcrumb{

display:flex;

align-items:center;

gap:8px;

font-family:"Space Grotesk",sans-serif;

font-size:14px;

color:#9aa3b7;

}

/* brand */

.breadcrumb .brand{

font-family:"Playfair Display",serif;

font-size:18px;

font-weight:600;

color:#ffffff;

text-decoration:none;

}

/* links */

.breadcrumb .crumb{

text-decoration:none;

color:#cfd6e6;

}

.breadcrumb .crumb:hover{

color:#ffffff;

}

/* slashes */

.breadcrumb .slash{

color:#6aa9ff;

}

/* section indicator */

.section-indicator{

margin-left:6px;

color:#7f8797;

font-weight:500;

}

/* ===================================== */
/* CSS FOR LOGO (I2) */
/* ===================================== */

.brand{
display:flex;
align-items:center;
gap:10px;
}

.brand-logo{
width:26px;
height:26px;
flex-shrink:0;
}

.brand-text{
font-family:"Playfair Display", serif;
font-size:20px;
font-weight:600;
color:#ffffff;
}
/* BRAND LINK RESET */

.brand{
text-decoration:none;
color:inherit;
}

.brand:visited{
color:inherit;
}

.brand:hover{
text-decoration:none;
}

.brand:hover{
opacity:.85;
}

/* ========================================= */
/* PROJECT NAVBAR MOBILE BREADCRUMB FIX */
/* ========================================= */

@media (max-width:768px){

/* reduce navbar padding */
.project-navbar{
padding-left:8px;
padding-right:8px;
}

/* hide long brand text */
.brand-text{
display:none;
}

/* keep logo icon visible */
.brand-logo{
width:24px;
height:24px;
}

/* breadcrumb layout */
.breadcrumb{
display:flex;
align-items:center;
gap:6px;
font-size:16px;
white-space:nowrap;
margin-left:-2px;
}




/* improve spacing */
.crumb{
font-size:14px;
}

/* github icon */
.github-link svg{
width:20px;
height:20px;
margin-right:-2px;
}

  /* Footer refinement */
  .site-footer{
    padding:80px 20px 50px;
  }

  .footer-meta{
    font-size:0.75rem;
    letter-spacing:0.6px;
  }

}

/* ===================================== */
/* PROJECT PAGE BASE */
/* ===================================== */

body.project-page{

background:#0b0f16;
color:#d6dbe4;

font-family:"EB Garamond",serif;

font-size:20px;
line-height:1.85;

font-feature-settings:"liga","kern";
font-variant-ligatures:common-ligatures;

text-rendering:optimizeLegibility;

}

/* ===================================== */
/* PAGE LAYOUT */
/* ===================================== */
.project-wrapper{

max-width:1400px;
margin:auto;

display:grid;

grid-template-columns:

200px      /* TOC */
minmax(0,720px)  /* Article */
260px;     /* Research Notes */

gap:64px;

padding:120px 32px;

}

/* ===================================== */
/* TABLE OF CONTENTS */
/* ===================================== */

.toc{

position:sticky;

top:120px;

height:max-content;

font-family:"Space Grotesk",sans-serif;

}

.toc h4{

font-size:13px;
letter-spacing:1px;
color:#7f8797;
text-transform:uppercase;

margin-bottom:16px;
}

.toc a{
display:block;
text-decoration:none;
color:#9aa3b7;
margin-bottom:12px;
font-size:14px;
padding-left:10px;
border-left:2px solid transparent;
transition:.2s;
}

.toc a:hover{
color:#ffffff;
border-left:2px solid rgba(106,169,255,0.4);
}

.toc a.active{
color:#6aa9ff;
font-weight:600;
border-left:2px solid #6aa9ff;
}


a{
transition:color .2s ease;
}

a:hover{
color:#6aa9ff;
}
/* ===================================== */
/* ARTICLE COLUMN */
/* ===================================== */

.lab-notebook{
position: relative;
width:100%;
position:relative;
max-width:720px;
margin:auto;


}

/* ===================================== */
/* READING GUIDE */
/* ===================================== */

.reading-guide{

position:absolute;

top:0;
bottom:0;

left:-28px;

width:1px;

background:

linear-gradient(
to bottom,
transparent,
rgba(255,255,255,0.08),
transparent
);

pointer-events:none;

}
/* ===================================== */
/* SECTION */
/* ===================================== */

.section{

margin-bottom:100px;

max-width:920px;

scroll-margin-top:80px;

}

/* ===================================== */
/* HEADINGS */
/* ===================================== */

.section h1{
font-family:"Playfair Display",serif;
font-size:52px;
line-height:1.15;
margin-bottom:28px;
letter-spacing:-0.5px;
color:#ffffff;
}

.section h2{
font-family:"Playfair Display",serif;
font-size:32px;
line-height:1.25;
margin-top:60px;
margin-bottom:16px;
  background: linear-gradient(
    180deg,
    #f5d97a 0%,
    #d4af37 50%,
    #b8962e 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
scroll-margin-top:120px;
}
/* ===================================== */
/* TEXT */
/* ===================================== */

.section p{
font-size:20px;
line-height:1.9;
color:#cfd6e6;
margin-bottom:26px;
}

.section p:first-of-type{
font-size:24px;
color:#f5f7ff;
line-height:1.7;
}
/* ===================================== */
/* LISTS */
/* ===================================== */

.section ul{
margin:24px 0 36px 26px;
}

.section li{
margin-bottom:10px;
color:#cfd6e6;
}



/* ===================================== */
/* SYSTEM BLOCK */
/* ===================================== */

.system-block{

background:#141a25;

border:1px solid rgba(255,255,255,.06);

padding:24px;

border-radius:8px;

margin:40px 0;

}

/* ===================================== */
/* LAB NOTE */
/* ===================================== */

.lab-note{
border-left:3px solid #6aa9ff;
padding:14px 18px;
background:rgba(106,169,255,0.05);
font-style:italic;
color:#d9e2ff;
margin:40px 0;
border-radius:4px;
}

/* ===================================== */
/* CODE */
/* ===================================== */

code{

font-family:"JetBrains Mono",monospace;

background:#141b29;

padding:4px 6px;

border-radius:4px;

color:#9ecbff;

}

pre{

background:#101622;

border:1px solid rgba(255,255,255,.06);

padding:24px;

border-radius:8px;

overflow-x:auto;

margin:40px 0;

}

/* ===================================== */
/* MOBILE */
/* ===================================== */

@media(max-width:1100px){

.project-wrapper{

grid-template-columns:1fr;

gap:40px;

padding:100px 24px;

}

.toc{

display:none;

}



.section{

max-width:100%;

}

.section h1{

font-size:36px;

}

.section h2{

font-size:26px;

}
.section p{
font-size:18px;
}

.section p:first-of-type{
font-size:20px;
}


}
/* ===================================== */
/* NOTES COLUMN */
/* ===================================== */


.research-notes{

position:sticky;
top:120px;

height:max-content;

display:flex;
flex-direction:column;
gap:24px;

font-family:"Space Grotesk",sans-serif;

}

.note-card{

background:#111722;

border:1px solid rgba(255,255,255,.05);

padding:18px;

border-radius:8px;

}

.note-card h5{

font-size:12px;
letter-spacing:1px;

text-transform:uppercase;

color:#7f8797;

margin-bottom:10px;

}

.note-card p{

font-size:14px;
line-height:1.6;

color:#cfd6e6;

}

.note-card ul{

margin-left:16px;

}

.note-card li{

font-size:14px;
margin-bottom:6px;

}
@media(max-width:1100px){

.project-wrapper{

grid-template-columns:1fr;

}

.toc{
display:none;
}

.research-notes{

position:static;

margin-top:60px;

}

}

/*FOR VIDEO INSERTION IN NOTES*/
.note-card.video{

padding:0;

overflow:hidden;

}

/* video frame */

.note-card.video video,
.note-card.video iframe{

width:100%;

display:block;

border:0;

aspect-ratio:16/9;

background:#000;

}

/* caption */

.note-card.video .caption{

padding:12px 14px;

font-size:13px;

color:#9aa3b7;

line-height:1.5;

}
.note-card.video video:hover,
.note-card.video iframe:hover{

filter:brightness(1.05);

}

/* ============================= */
/* ELITE SCROLLBAR SYSTEM */
/* ============================= */

/* Works on Chrome, Edge, Safari */
::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-track{
  background:transparent;
}

::-webkit-scrollbar-thumb{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.18),
    rgba(255,255,255,0.08)
  );

  border-radius:10px;

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter: blur(6px);

  transition: all 0.3s ease;
}

/* Hover = alive feel */
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(
    180deg,
    rgba(212,175,55,0.8),
    rgba(212,175,55,0.4)
  );

  box-shadow:
    0 0 12px rgba(212,175,55,0.25);
}

/* Active drag */
::-webkit-scrollbar-thumb:active{
  background:#d4af37;
}

/* Firefox support */
*{
  scrollbar-width:thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}