@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Karla:wght@200;300;400;600;700&display=swap');


@font-face{
  font-family: 'Bitcount Grid Double';
  src: local('Bitcount Grid Double'),
       
       url('assets/fonts/BitcountGridDoubleVF.ttf') format('truetype'),
       url('assets/fonts/BitcountGridDouble-Variable.ttf') format('truetype'),
       url('assets/fonts/BitcountGridDouble.woff2') format('woff2'),
       url('assets/fonts/BitcountGridDouble.woff') format('woff'),
       url('assets/fonts/BitcountGridDouble.woff.ttf') format('truetype'); 
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

:root{
  --bg: #fff;        
  --text: #222;
  --muted: #666;     
  
  --accent: #8b5cf6;
  
  --accent-strong: #7c3aed;
  --accent-ring: rgba(139,92,246,.28); 
  
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
  --font-header: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
  --font-academic: 'Source Serif 4', Georgia, 'Times New Roman', serif; 
  --font-detail: 'Source Sans 3', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
  --font-lmr: 'Latin Modern Roman', 'LatinModernRoman10Regular', 'LMRoman10', 'Source Serif 4', serif; 
  
  --font-karla-regular: 'Karla', 'Karla Custom Regular', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-karla-light: 'Karla', 'Karla Custom ExtraLight', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-karla-thin: 'Karla', 'Karla Custom ExtraLight', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}


body{
  background: var(--bg);
  
  font-family: var(--font-body);
  line-height: 1.6;
}


.site-header{
  display: flex;
  align-items: center;
  justify-content: space-between; 
  gap: 32px;
  padding: 28px 24px;             
  background: #fff;
  width: 100%;
  max-width: 1280px;              
  margin: 0 auto;                  
  box-shadow: none;
  border-bottom: none;
  flex-wrap: wrap;                 
  margin-top: 72px;                
}


.logo{
  display: flex;
  align-items: center;          
  gap: 14px;
  color: var(--text);
  text-decoration: none;
  line-height: 1;
  padding-top: 0;               
}
.logo:link, .logo:visited, .logo:hover, .logo:active{
  color: var(--text);
  text-decoration: none;
}
.logo-square{
  width: 48px;                
  height: 48px;
  background: var(--accent);
  border-radius: 2px;
  flex: 0 0 48px;
  position: relative;
  transform: translateY(0);     
}

.logo-square.ripple{ border-radius:50%; box-shadow:0 0 0 3px var(--accent-ring) }

.logo-square.ripple-square{ box-shadow:0 0 0 3px var(--accent-ring) }

.logo-square.triple{
  position:relative;
  background:none;
  border:2px solid var(--accent-strong);
}
.logo-square.triple::before,
.logo-square.triple::after{
  content:"";
  position:absolute;
  left:0; top:0; right:0; bottom:0;
  pointer-events:none;
}

.logo-square.triple::before{
  border:2px solid var(--accent);
  inset:4px;
}

.logo-square.triple::after{
  border:2px solid var(--accent-ring);
  inset:8px;
}


.logo-square.square-diamond{
  position: relative;
  background: var(--text);                
  border-radius: 2px;
}

.logo-square.square-diamond::before{
  content: "";
  position: absolute;
  inset: 4px;                             
  background: var(--accent);              
  border-radius: 2px;
}

.logo-square.square-diamond::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62%;                             
  height: 62%;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--bg);
  border-radius: 2px;
}

.logo-square.wave{ background:none; position:relative; border-radius:0 }
.logo-square.wave::before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background: var(--accent);
  -webkit-mask: url('logo-wave.svg') center / contain no-repeat;
  mask: url('logo-wave.svg') center / contain no-repeat;
}
.logo-text{
  font-size: 3.2rem;           
  font-weight: 700;
  
  font-family: 'Bitcount Grid Double', var(--font-header);
  letter-spacing: 0.5px;        
  line-height: 1.05;            
  position: relative;           
  top: 2px;
}


.site-nav{
  display: flex;
  align-items: center;
  gap: 36px;                  
  padding: 0;
  margin: 0;
  padding-top: 4px;
}
.site-nav a{
  color: var(--text);         
  text-decoration: none;
  font-size: 1.05rem;         
  letter-spacing: 0.2px;      
  font-weight: 600;           
  font-family: var(--font-header);
  padding-bottom: 6px;
  transition: color .18s, border-bottom .18s, transform .12s;
}
.site-nav a:hover{ color: var(--accent); }

.site-nav a:focus-visible{
  outline: 3px solid var(--accent-strong);
  outline-offset: 4px;
  text-decoration: underline;
  text-underline-offset: 6px;
}


.site-nav a.active{
  color: var(--text);
  border-bottom: 2px solid var(--accent); 
  position: relative;
}


.main-content{
  width:100%;
  max-width:1280px;         
  margin-left:auto;
  margin-right:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin-top:16px;
  padding:40px 24px 80px;   
  gap:32px;
}


@media (min-width:992px){
  .main-content{
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;   
    gap:56px;                        
  }
  
  .profile-img{ flex:0 0 800px; max-width:800px }  
  .bio-section{ flex:1 1 auto; max-width:none }  
}


@media (max-width:768px){
  .site-header{ padding:16px 14px; gap:12px; margin-top:20px; margin-bottom:0 }
  .site-nav{ width:100%; justify-content:center; gap:26px; order:1; flex:1 0 100%; margin-bottom:44px }
  
  .site-nav a{ padding-bottom:0 }
  .site-nav a.active{ border-bottom:none; text-decoration:underline; text-underline-offset:6px }
  
  .site-nav::before{ content:none }
  .logo{ order:2; width:100%; justify-content:center; margin-top:0 }
  .main-content{ margin-top:0; padding-top:44px; padding-left:16px; padding-right:16px }
  
  .profile-img{ width:100%; max-width:100%; flex:none; display:block }
}


.profile-img{
  width:100%;
  max-width:600px;
  height:auto;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.06);
  flex:0 0 600px;
}


@media (max-width:991px){
  .profile-img{ width:100%; max-width:100%; flex:none; display:block }
}


.bio-section{
  max-width:540px;
  text-align:left;
}
.bio-section h1{
  font-size:2.3rem;           
  font-weight:600;
  margin:0 0 1.25rem 0;       
}
.bio-section p{
  color:#444;
  font-size:1.16rem;          
  margin:0 0 1.1rem 0;        
  line-height:1.85;           
}


.cv-btn{
  display:block;              
  margin:32px auto 0;         
  padding:14px 44px;          
  width:fit-content;          
  border:2px solid var(--text);
  background:#fff;
  color:var(--text);
  font-weight:700;
  font-size:1.05rem;          
  text-decoration:none;
  border-radius:4px;
  text-transform:uppercase;
  letter-spacing:1px;
  transition:background .18s, color .18s;
}
.cv-btn:hover{ background:var(--accent-strong); color:#fff; border-color: var(--accent-strong); }

.cv-btn:focus-visible{
  outline: 3px solid var(--accent-strong);
  outline-offset: 3px;
}


.contact{
  margin-top:2rem;            
  color:var(--text);
  font-size:1.08rem;
  font-weight:500;
}


.contact-icons{ display:flex; gap:44px; margin-top:48px; align-items:center; justify-content:center }
.contact-icons a{ color:var(--text); line-height:1; transition: color .18s, transform .12s; text-decoration:none }
.contact-icons a:hover{ color:var(--accent); transform: translateY(-1px) }
.contact-icons i{ font-size:28px; display:inline-block }

.contact-icons a:focus-visible{
  outline: 3px solid var(--accent-strong);
  outline-offset: 6px;
  border-radius: 6px;
}




@media (max-width:575px){
  .site-header{ padding:14px 10px; gap:12px; margin-top:18px; margin-bottom:0 }
  .site-nav{ justify-content:space-around; gap:22px }
  .site-nav a{ font-size:1rem }
  .logo-text{ font-size:1.15rem }
  
  .main-content{ padding:24px 8px 48px; gap:20px; max-width:100%; margin-top:0; padding-top:44px }
  .profile-img{ width:100%; max-width:100%; flex:none }
  .bio-section{ max-width:100% }
  .logo{ margin-top:0 }
}


.content-page{
  width:100%;
  max-width:1280px;  
  margin:0 auto;
  padding:40px 24px 80px;
}
.page-title{
  font-size:2rem;
  margin-bottom:1.25rem;
}


.page-intro{
  color:#333;
  font-size:1.16rem;  
  line-height:1.85;   
  font-family: var(--font-body);
  font-weight: 400;
  margin:0 0 1.1rem 0;
}
.page-intro a{ color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px }
.page-intro a:hover{ color: var(--accent) }


.work-grid{
  display:grid;
  grid-template-columns: 1fr; 
  gap:28px;
}
.work-card{
  position:relative;
  display:block;
  background:transparent;     
  border:none;
  border-radius:0;
  overflow:hidden;
  padding:0;                  
  box-shadow:none;
  transition: color .18s;
  text-decoration:none;
  color:inherit;
}

.work-card::after{ display:none }

.work-card:focus-visible{
  outline: 3px solid var(--accent-strong);
  outline-offset: 6px;
  border-radius: 14px;
}

.work-card:hover .work-thumb,
.work-card:focus-visible .work-thumb{
  box-shadow: inset 0 0 0 9999px rgba(124,58,237,0.16);
}

.work-thumb-wrap{ position:relative; display:block; border-radius:14px; overflow:hidden }
.work-thumb-wrap::after{
  content:""; position:absolute; inset:0; border-radius:14px;
  background: rgba(124,58,237,0.22); 
  opacity:0; transition: opacity .18s;
}
.work-card:hover .work-thumb-wrap::after,
.work-card:focus-visible .work-thumb-wrap::after{ opacity:1 }

.work-card:hover h3{ color: inherit }
.work-thumb{
  width:100%;
  aspect-ratio:1/1;       
  object-fit:cover;
  display:block;
  background:#f6f6fb;
  border-radius:14px;          
  border:none;
  transition: filter .18s, box-shadow .18s; 
}

.work-thumb.contain{
  object-fit: contain;
  background: #fff;        
  padding: 8px;            
}

.work-card:hover .work-thumb{ filter: saturate(1.08) contrast(1.03) brightness(1.02); }
.work-card h3{
  margin:10px 0 0;        
  text-align:center;
  font-size:0.96rem;      
  font-weight:400;
  font-family: var(--font-header);
  color:#6b7280;          
  letter-spacing: .05em;  
  text-transform: uppercase;
}
.work-card p{ display:none }

@media (min-width:768px){
  .work-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width:992px){
  .work-grid{ grid-template-columns: repeat(3, 1fr); gap:32px }
}


.detail-page{
  width:100%;
  max-width:1280px;            
  margin:0 auto;
  padding:40px 24px 96px;
  font-family: var(--font-karla-light);  
  font-weight: 300;                        
  color:#222;
}
.detail-header{ display:block; margin-bottom:12px }
.detail-title{ font-family: var(--font-karla-regular); font-weight:400; font-size:2.5rem; letter-spacing:.01em; margin:0 0 2px 0 }
.detail-subtitle{
  color:#6b7280;
  font-size:1.32rem;         
  font-style:italic;
  margin:6px 0 22px;
  font-family: var(--font-karla-light); 
  font-weight:300;
}
.detail-meta{ color:#666; font-size:.95rem }

.detail-hero{ width:100%; border-radius:14px; display:block; object-fit:cover; aspect-ratio: 4/3; background:#f6f6fb; margin: 8px 0 18px }
.detail-body{ color:#333; font-size:1.16rem; line-height:1.85; max-width:none; width:100%; font-family: var(--font-body); font-weight:400 }
.detail-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:16px }
.detail-actions a{
  padding:10px 16px;
  border:1.5px solid var(--text);
  color:var(--text);
  text-decoration:none;
  border-radius:10px;
  font-weight:600;
  font-family: var(--font-header);
}
.detail-actions a:hover{ background:var(--accent); border-color:var(--accent); color:#fff }


.section-title{
  font-family: var(--font-karla-light); 
  font-weight:300;
  font-size:1.55rem;  
  color:#444;
  margin:28px 0 10px;
}
.section-title.abstract{ font-family: var(--font-karla-light); font-weight:300; font-size:1.6rem; color:#333; letter-spacing:.01em }


.embed-box{ margin:10px 0 20px }
.embed-pdf{
  width:100%;
  height:min(80vh, 900px);
  border:none;
  border-radius:14px;
  background:#f6f6fb;
}
.embed-img{
  width:100%;
  display:block;
  border-radius:14px;
  background:#f6f6fb;
}

.embed-img.schematic{
  max-width:720px;
  margin:12px auto 20px;
}
@media (max-width:575px){
  .embed-pdf{ height:65vh }
}
.detail-section{ margin-bottom:18px }


.talks-list{ list-style:none; padding:0; margin:0 }
.talks-list li{ margin-bottom:8px; color:#444 }
.talks-list a{ color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px }
.talks-list a:hover{ color: var(--accent) }


.gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
  margin-top:18px;
}
.gallery-item{ width:100%; border-radius:14px; object-fit:cover; background:#f6f6fb; display:block; aspect-ratio: 4/3 }

@font-face{
  font-family: 'Karla Custom Regular';
  src: url('assets/fonts/Karla-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Karla Custom ExtraLight';
  src: url('assets/fonts/Karla-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}